New to Telerik UI for ASP.NET MVCStart a free 30-day trial

ASP.NET MVC Upload Overview

The Telerik UI Upload HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI Upload widget.

The Upload uses progressive enhancement to deliver the best possible uploading experience to users, without requiring extra developer effort.

Initializing the Upload

The following example demonstrates how to define the Upload widget.

Razor
@(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a
        .Save("Save", "Upload")
        .Remove("Remove", "Upload")
        .AutoUpload(true)
    )
)

Basic Configuration

The following example demonstrates the basic configuration of the Upload component and how to get the Upload widget instance.

An Upload widget configured in such way offers support for multiple file selection, asynchronous removal of uploaded files, progress tracking, in-progress cancellation of upload, file drag-and-drop. Progress tracking, file drag-and-drop, and in-progress cancellation of upload are automatically enabled if supported by the browser.

The Upload works in <input type="file" /> elements, so it is only able to upload files selected by the user, which exist in the file system. For uploading files generated with JavaScript on the fly, use another approach, e.g. an Ajax request.

Razor
@(Html.Kendo().Upload()
    .Name("files")
    .Multiple(true)
    .Async(a => a
        .Save("ChunkSave", "Upload")
        .Remove("Remove", "Upload")
        .AutoUpload(true)
        .ChunkSize(1100)
    )
)

<script type="text/javascript">
    $(function() {
        // The Name() of the Upload is used to get its client-side instance.
        var files = $("#files").data("kendoUpload");
    });
</script>

Functionality and Features

FeatureDescription
Modes of operationYou can specify whether the Upload behaves like a regular file input or like a standalone component with asynchronous operations.
Dragging and dropping of filesThe Upload enables you to drag and drop items within the component's drop zone.
Chunk upload of filesYou can send large chunks of files that will be processed asynchronously.
Validation of filesThe Upload enables you to integrate file validation for each of the selected files.
Identification of filesYou can identify the file object during its upload process.
Sending and receiving metadataYou can send additional information to the specified endpoint which is used for storing the uploaded file.
AccessibilityThe Upload is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
EventsThe Upload allows you to handle its file processing events and implement custom functionality.

Next Steps

See Also