ASP.NET Core Upload Overview

Telerik UI for ASP.NET Core Ninja image

The Upload is part of Telerik UI for ASP.NET Core, 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 TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers 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)
    )
)
    <kendo-upload name="files">
        <async auto-upload="true" 
               save-url="@Url.Action("Save", "Upload")" 
               remove-url="@Url.Action("Remove","Upload")" />
    </kendo-upload>
public IWebHostEnvironment WebHostEnvironment { get; set; }

public UploadController(IWebHostEnvironment webHostEnvironment)
{
    WebHostEnvironment = webHostEnvironment;
}

public async Task<ActionResult> Save(IEnumerable<IFormFile> files)
{
    // The Name of the Upload component is "files".
    if (files != null)
    {
        foreach (var file in files)
        {
            var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

            // Some browsers send file names with full path.
            // The sample is interested only in the file name.
            var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
            var physicalPath = Path.Combine(WebHostEnvironment.WebRootPath, "App_Data", fileName);

            using (var fileStream = new FileStream(physicalPath, FileMode.Create))
            {
                await file.CopyToAsync(fileStream);
            }
        }
    }

    // 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(WebHostEnvironment.WebRootPath, "App_Data", fileName);

            // TODO: Verify user permissions.

            if (System.IO.File.Exists(physicalPath))
            {
                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>
<kendo-upload name="files" multiple="true">
    <async save-url="@Url.Action("ChunkSave","Upload")" 
           remove-url="@Url.Action("Remove","Upload")" 
           auto-upload="true" 
           chunk-size="1100"/>
</kendo-upload>

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.

Next Steps

See Also

In this article