Upload HtmlHelper Overview

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.

Basic Configuration

  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.

    public ActionResult Index()
    {
        return View();
    }
    
  3. Add the Upload to the view. The name attribute is required and must be unique. It is used as a form field name in the requests to the server.

        <%: Html.Kendo().Upload()
            .Name("attachments")
            .Async(async => async
                .Save("Save", "Home")
            )
        %>
    
        @(Html.Kendo().Upload()
            .Name("attachments")
            .Async(async => async
                .Save("Save", "Home")
            )
        )
    
  4. Implement the Save controller action.

    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.

Functionality and Features

Events

You can subscribe to all Upload events. For a complete example on basic Upload events, refer to the demo on using the events of the Upload.

Handling by Handler Name

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

    <%: 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>

Handling by Template Delegate

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

@(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>)
    )
)

Referencing Existing Instances

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

// Place the following after the Upload for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the Upload is used to get its client-side instance.
        var upload = $("#attachments").data("kendoUpload");
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article