The Upload widget uses progressive enhancement to deliver the best possible uploading experience to users without requiring any extra developer effort. Upload is packed with features, including:

• Asynchronous and synchronous (on form submit) file upload
• Multiple file selection
• Removing uploaded files
• Progress tracking *
• File Drag-and-Drop *
• Cancelling upload in progress *

* These features are automatically enabled if supported by the browser.

Upload is a standards-based widget. No plug-ins required.

Getting Started

There are two primary ways to configure Upload:

1. For synchronous upload using an HTML form and input
2. For asynchronous upload using a simple HTML input

The async upload is implemented using the new HTML5 File API, but it will gracefully degrade and continue to function in legacy browsers (using a hidden IFRAME). If placed inside a form, queued and partially uploaded files will be sent synchronously if the async upload is submitted with the form.

Configuring for synchronous upload

<!-- Kendo will automatically set the proper FORM enctype attribute -->
<form method="post" action="handler.php">
    <div>
        <input name="files" id="files" type="file" />
    </div>
</form>

   $(document).ready(function() {
       $("#files").kendoUpload();
   });

It’s important to note that some type of server-side handler is needed to process and save the uploaded files. There are different server-side techniques for handling file uploads depending on the technology you use. Please consult the documentation for your server technology to understand how to implement a basic file handler.

Configure for async upload

<input name="files" id="files" type="file" />

$("#files").kendoUpload({
    async: {
        saveUrl: "saveHandler.php",
        removeUrl: "removeHandler.php",
        autoUpload: true
    }
});

Like synchronous uploads, the async upload requires a server-side handler to process and save (or remove) the uploaded files. The handlers need to accept POST requests. The save action will POST the file upload to the handler (similar to synchronous uploads). The remove action will POST only the name of the file that should be removed on the server.

Both handlers should return either:

• An empty response to signify success.
• Response containing JSON string with "text/plain" content encoding. The deserialized object can be accessed in the success event handler.
• Any other response to signify error.

Configuring Upload behavior

Upload enables most behaviors by default, providing the richest experience possible depending on browser capabilities. Behaviors can be easily configured, though, using simple configuration properties. Refer to the Upload demo Configuration tab for more information on available properties.

$("#upload").kendoUpload({
    multiple: false,
    showFileList: false
});