Edit this page

Drag and Drop

Users can select files by dropping them over the Kendo UI Upload.

As of the Kendo UI 2016 Q3 release, custom drop zones can be initialized depending on a particular selector that provides the upload of a file through the drag-and-drop functionality.

Important

The drag-and-drop functionality is available only in the asynchronous mode and requires a supported browser.

Selecting and Uploading Files

File Upload

To use the Kendo UI Upload as a drop zone:

  1. Drag a file over the browser window for the drop zone to appear.

    Table 1: Dragging files to make the drop zone appear

    Drag files to make the drop zone appear

  2. When you pass the mouse over the drop zone, it gets highlighted.

    Table 2: Passing the mouse to highlight the drop zone

    Pass the mouse to highlight the drop zone

  3. Release the file over the drop zone to add it to the upload queue.

    Table 3: Releasing the file to the upload queue

    Release the file to the upload queue

Custom Drop Zones

As of the Kendo UI 2016 Q3 release, custom drop zones can be initialized depending on a particular selector that provides the upload of a file through the drag-and-drop functionality.

To customize the appearance of the drop zone during the process of dragging and dropping, note the following:

  1. When the user drags the file over the browser window, the custom drop zone element receives the "k-dropzone-active" class.
  2. When the user drags the files over the drop zone itself, the element receives an additional "k-dropzone-hovered" class and the drop zone is highlighted. The file is dragged over the drop zone itself
  3. Once the file is released over the drop zone, it is added to the upload queue.

Drop Zone Visibility

By default, the drop zone is not visible.

The following example demonstrates how to override the default drop zone—when the Kendo UI Upload itself is used as a drop zone—by applying CSS rules.

Example
div.k-dropzone {
    border: 1px solid #c5c5c5; /* For Default; Different for each theme */
}

div.k-dropzone em {
    visibility: visible;
}

The following example demonstrates how to customize the appearance of the drop zone during the process of dragging and dropping.

Example
div.k-dropzone {
    border: 1px solid red;
}

.customDropZone.k-dropzone-active {
    border: 1px solid yellow;
}
.customDropZone.k-dropzone-active.k-dropzone-hovered {
    border: 1px solid green;
}

See Also

Other articles on the Kendo UI Upload:

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

Give article feedback

Tell us how we can improve this article

close
Dummy