New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Drag and Drop Upload

RadAsyncUpload Drag and Drop

Starting from Q3 2011 RadAsyncUpload provides a new drag and drop functionality for uploading files. The new functionality allows the user to drag a file directly on the RadAsyncUpload control without the use of file dialog. Upon file dropping the upload will start automatically. When the dragged file is positioned over the RadAsyncUpload a drop area appears indicating where to drop the file.Drag and Drop Upload

From Q3 2012 SP1 this message can be easily localized by using Localization-DropZone property of RadAsyncUpload.

The new functionality relies on the HTML5 FileApi and Drag-And-Drop modules and therefore is available only in browsers which support the aforementioned modules. As for now such browsers are:

  • Mozilla Firefox v. 4+
  • Google Chrome
  • Internet Explorer 10+
  • Edge

You will need to prevent the default behavior of the browser when the file is not dropped over the RadAsyncUpload. More information about the Native HMTL5 Drag and Drop could be found here.

DropZones Property

As of Q3 2012 RadAsyncUpload supports the DropZones property. By setting the DropZones (which are CSS selectors) the user can upload files by dropping them on different areas of the page.

If you are after creating a custom dropzone for each row of a RadGrid or a Repeater you can check the Custom DropZone for each row in a RadGrid KB article for an example.

Keep in mind that the drop zones should be listed with comma separator as demonstrated in the demo here and the following code <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic" DropZones=".DropZone1,#DropZone2"/>

See Also

In this article