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.
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"/>