Getting Started with the Upload

This tutorial explains how to set up a basic Telerik UI for ASP.NET MVC Upload and highlights the major steps in the configuration of the component.

You will initialize the Upload component and configure its mode of operation. Finally, you will learn how to handle the events of the Upload.

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET MVC components:

• To create a new pre-configured project for the Telerik UI for ASP.NET MVC components, you can use a project template.

• To manually configure an existing project by using NuGet, see the Adding Telerik UI through NuGet.

1. Prepare the CSHTML File

The first step is to add the required directives at the top of the .cshtml document:

• To use the Telerik UI for ASP.NET MVC HtmlHelpers:

  @using Kendo.Mvc.UI
  

Optionally, you can structure the content in the view by adding the desired HTML elements like headings, divs, paragraphs, and others.

    @using Kendo.Mvc.UI

    <h4>Upload with a placeholder</h4>
    <div>

    </div>

2. Initialize the Upload

Use the Upload HtmlHelper to add the component to a page:

• The Name() configuration method is mandatory as its value is used for the id and the name attributes of the Upload element.
• The Multiple() configuration method specifies if the user can select only one file at a time.

    @(Html.Kendo().Upload()
         .Name("upload")
         .Multiple(true)
    )

3. Configure the Mode of Operation

The next step is to specify the mode of operation for the Upload. In this tutorial, you will configure the asynchronous mode, which requires dedicated server handlers to store and remove uploaded files in the application.

    .Async(a => a
        .Save("SaveAsync", "Upload")
        .Remove("Remove", "Upload")
    )  

    public ActionResult SaveAsync(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);

                // Implement the server validation before saving. The current example is a rudimentary one.
                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))
                {
                    System.IO.File.Delete(physicalPath);
                }
            }
        }

        // Return an empty string to signify success
        return Content("");
    }

4. Handle the Upload Events

The Upload exposes various events that you can handle and further customize the functionality of the component. In this tutorial, you will use the Upload event to capture one or more files and the Success event to verify whether the upload operation has been completed successfully.

    @(Html.Kendo().Upload()
         .Name("upload")
         .Multiple(true)
         .Async(a => a
            .Save("SaveAsync", "Upload")
            .Remove("Remove", "Upload")
         )  
         .Events(events => events
            .Upload("onUpload")
            .Success("onSuccess")
        )
    )

    <script>
        function onUpload(e) {
            // An array with information about the uploaded files.
            var files = e.files;
            alert("Uploaded files" + files);
        }
        function onSuccess(e) {
            // An array with information about the successfully uploaded files.
            var files = e.files;

            if (e.operation == "upload") {
                alert("Successfully uploaded " + files.length + " files");
            }
        }
    </script>

5. (Optional) Reference Existing Menu Instances

You can reference the Upload instances that you have created and build on top of their existing configuration:

1. Use the .Name() (id attribute) of the component instance to get a reference.

       <script>
           $(document).ready(function() {
               var uploadReference = $("#upload").data("kendoUpload"); // uploadReference is a reference to the existing Upload instance of the helper.
           })
       </script>
   

2. Use the Upload client-side API to control the behavior of the control. In this example, you will use the removeAllFiles method to remove all of the uploaded files by sending a remove request to the specified handler.

       <script>
           $(document).ready(function() {
               var uploadReference = $("#upload").data("kendoUpload");
               uploadReference.removeAllFiles();
           })
       </script>
   

Next Steps

• Validating the Files
• Using the Drag and Drop of the Upload
• Enabling Chunk Upload

See Also

• Using the API of the Upload for ASP.NET MVC (Demo)
• Client-Side API of the Upload
• Server-Side API of the Upload
• Knowledge Base Section