ASP.NET MVC Upload Overview
The Upload is part of Telerik UI for ASP.NET MVC, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
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.
@(Html.Kendo().Upload()
.Name("files")
.Async(a => a
.Save("Save", "Upload")
.Remove("Remove", "Upload")
.AutoUpload(true)
)
)
public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
// The Name of the Upload component is "files"
if (files != null)
{
foreach (var file in files)
{
// Some browsers send file names with full path.
// We are only interested in the file name.
var fileName = Path.GetFileName(file.FileName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// The files are not actually saved in this demo
// file.SaveAs(physicalPath);
}
}
// Return an empty string to signify success
return Content("");
}
public ActionResult Remove(string[] fileNames)
{
// The parameter of the Remove action must be called "fileNames"
if (fileNames != null)
{
foreach (var fullName in fileNames)
{
var fileName = Path.GetFileName(fullName);
var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
// TODO: Verify user permissions
if (System.IO.File.Exists(physicalPath))
{
// The files are not actually removed in this demo
// System.IO.File.Delete(physicalPath);
}
}
}
// Return an empty string to signify success
return Content("");
}
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.
@(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
| Feature | Description |
|---|---|
| Modes of operation | You can specify whether the Upload behaves like a regular file input or like a standalone component with asynchronous operations. |
| Dragging and dropping of files | The Upload enables you to drag and drop items within the component's drop zone. |
| Chunk upload of files | You can send large chunks of files that will be processed asynchronously. |
| Validation of files | The Upload enables you to integrate file validation for each of the selected files. |
| Identification of files | You can identify the file object during its upload process. |
| Sending and receiving metadata | You can send additional information to the specified endpoint which is used for storing the uploaded file. |
| Accessibility | The Upload is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation. |
| Events | The Upload allows you to handle its file processing events and implement custom functionality. |