Upload JSP Tag Overview

The Upload JSP tag is a server-side wrapper for the Kendo UI Upload widget.

Getting Started

Configuration

Below are listed the steps for you to follow when configuring an asynchronous upload using the Spring MVC framework.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for JSP.

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

    @RequestMapping(value = "/async", method = RequestMethod.GET)
    public String index() {
        return "web/upload/async";
    }

Step 3 Add the Upload to the view.

    <kendo:upload name="files">
        <kendo:upload-async autoUpload="true" saveUrl="${saveUrl}" removeUrl="${removeUrl}"/>
    </kendo:upload>

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

Step 4 Implement the Save controller action.

    @RequestMapping(value = "/async/save", method = RequestMethod.POST)
    public @ResponseBody String save(@RequestParam List<MultipartFile> files) {
        // Save the files
        // for (MultipartFile file : files) {
        // }

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

Event Handling

Subscribe to Events

You can subscribe to all events exposed by Kendo UI Upload.

    <kendo:upload name="files" upload="onUpload" success="onSuccess">
        <kendo:upload-async autoUpload="true" saveUrl="${saveUrl}" removeUrl="${removeUrl}"/>
    </kendo:upload>

    <script>
    function onUpload(e) {
        // Handle the upload event
    }

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

Reference

Existing Instances

You are able to reference an existing Upload instance via the jQuery.data(). Once a reference is established, you are able to use the Upload API to control its behavior.

    // Put this after your Kendo 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

In this article