Edit this page

Upload Overview

The Kendo UI Upload widget uses progressive enhancement to deliver the best possible uploading experience to users, without requiring extra developer effort.

Getting Started

Initialize the Upload

Kendo UI Upload can be initiated from a simple HTML form, an input element of the "file" type, and a jQuery selector.

The following example demonstrates how to create and initialize the Upload.

Example
<!-- Kendo will automatically set the form enctype attribute to "multi-part/form-data" -->
<form method="post" action="handler.php">
    <div>
        <input name="photos[]" id="photos" type="file" />
    </div>
</form>

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

Note the array syntax in the input name: it is used to hint the Upload handler to treat the photos as an array.

For detailed information on how to send metadata to the save handler and receive metadata in the Upload widget, see this article.

For more information on how to handle the uploaded files, refer to the documentation of your specific server technology.

Features

Basic Functionalities

Kendo UI Upload is a widget based on standards and requires no plug-ins. It supports the following functionalities:

  • Asynchronous and synchronous (on form submit) upload of files in the user's file system
  • Chunk upload functionality that enables upload of large files, pause and resume
  • Multiple file selection
  • Removal of uploaded files
  • Progress tracking
  • File drag-and-drop
  • In-progress cancellation of upload

Progress tracking, file drag-and-drop, and in-progress cancellation of upload are automatically enabled if supported by the browser. For detailed information on the browser versions which support the Upload features, refer to this article.

Important

  • Uploading large files in chunks is currently not supported, as it would require an additional plug-in—either Flash, or Silverlight—to compensate for the missing File API support in older browsers.
  • The Upload widget works in <input type="file" /> elements, so it is only able to upload files selected by the user, which exist in the file system. For uploading files generated with JavaScript on the fly, use another approach, e.g. an Ajax request.

Modes of Operation

For detailed information on the modes of operation Kendo UI Upload supports, refer to this article.

Drag and Drop

For detailed information on the drag-and-drop functionality Kendo UI Upload supports, refer to this article.

Chunk Upload

For detailed information on the chunk upload functionality Kendo UI Upload supports, refer to this article.

Common Scenarios

Identify Files When Uploading

Regardless of the mode of operation, a unique identifier (uid) is generated for each file. In the case of a synchronous or asynchronous upload with the batch option enabled, the single uid that is generated, stands for the whole batch of files, selected at the same time. In the case of asynchronous upload with the batch option disabled, a uid is generated for each separate file.

The generated uid is added to the cancel error, progress, remove, select, and upload events as a property of the e.files collection.

Reference

Existing Instances

Refer to an existing Upload instance via the jQuery.data(). Once a reference has been established, use the Upload API to control its behavior.

The following example demonstrates how to access an existing Upload instance.

Example
var upload = $("#upload").data("kendoUpload");

See Also

Other articles and how-to examples on the Kendo UI Upload:

For how-to examples on the Kendo UI Upload widget, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy