ASP.NET Core Upload Overview

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.

Download Free 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("");
}

Starting with the 2024 Q3 release, the HtmlHelper version of the component supports declarative initialization.

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.

ASP.NET Core Upload Overview

Initializing the Upload

Basic Configuration

Functionality and Features

Next Steps

See Also

Getting Started

Support Resources

Community