Edit this page

Upload HtmlHelper Overview

The Upload HtmlHelper extension is a server-side wrapper for the Kendo UI Upload widget.

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Upload.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method which renders the view.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add the Upload to the view.

    Example
    
            <%: Html.Kendo().Upload()
                    .Name("attachments")
                    .Async(async => async
                        .Save("Save", "Home")
                    )
            %>
    
    
            @(Html.Kendo().Upload()
                    .Name("attachments")
                    .Async(async => async
                        .Save("Save", "Home")
                    )
            )
    

    The name attribute is required and must be unique. It is used as a form field name in the requests to the server.

  4. Implement the Save controller action.

    Example
        public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments)
        {
            //The Name of the Upload component is "attachments".
            foreach (var file in attachments)
            {
                //Some browsers send file names with a full path. You only care about the file name.
                var fileName = Path.GetFileName(file.FileName);
                var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
    
                file.SaveAs(destinationPath);
            }
    
            //Return an empty string to signify success.
            return Content("");
        }
    
  5. Build and run the application. The uploaded files appear in the App_Data folder.

Event Handling

You can subscribe to all Upload events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

        <%: Html.Kendo().Upload()
                .Name("attachments")
                .Events(e => e
                    .Upload("onUpload")
                    .Success("onSuccess")
                )
        %>
        <script>
        function onUpload(e) {
            //Handle the upload event.
        }

        function onSuccess() {
            //Handle the success event.
        }
        </script>

        @(Html.Kendo().Upload()
                .Name("attachments")
                .Events(e => e
                    .Upload("onUpload")
                    .Success("onSuccess")
                )
        )
        <script>
        function onUpload(e) {
            //Handle the upload event.
        }

        function onSuccess() {
            //Handle the success event.
        }
        </script>

By Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

Example

        @(Html.Kendo().Upload()
              .Name("attachments")
              .Events(e => e
                  .Upload(@<text>
                    function() {
                        //Handle the upload event inline.
                    }
                  </text>)
                  .Success(@<text>
                    function() {
                        //Handle the success event inline.
                    }
                    </text>)
              )
        )

Reference

Existing Instances

To reference an existing Kendo UI Upload instance, use the jQuery.data() configuration option. Once a reference is established, use the Upload API to control its behavior.

Example
    //Put this after your Kendo UI Upload for ASP.NET MVC declaration.
    <script>
    $(function() {
        //Notice that the Name() of the Upload is used to get its client-side instance.
        var upload = $("#attachments").data("kendoUpload");
    });
    </script>

See Also