AsyncUpload drop zone define in Javascript

[Aarsh]

Can we define AsyncUpload drop zone via javascript/jQuery 1.9.1 ?

telerik controls version : 2013.2.611.40
.NET : 4.0
Browser IE 8/9/10+

[Hristo Valyavicharski]

Hi Aarsh,

Drag and Drop zones could be set with javascript as use the RadAsyncUpload's client API:

var upload = $find('RadAsyncUpload1');
upload.set_dropZones('.DropZone1,#DropZone2');

However the Drag and Drop functionality relies on the HTML5 File API and Drag-And-Drop modules, which means that it works in modern browsers only:

Firefox 4+, Google Chrome, IE10+, Safari 5+.

Regards,
Hristo Valyavicharski
Telerik

[Aarsh]

Thank you, Hristo. I understand that it's HTML5 specific feature and thanks for pointing out my attention.

Thanks again,
-Aarsh

[Nimish]

Hello to everyone , 

I also need somewhat modification in "telerik:RadAsyncUpload" functinality with drag and drop , I am using this one link 
http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx


but i want my uploaded files to be in drag and drop area . not on the top of select button , Can any one help on this . I have attached  mage also for demo 

[Hristo Valyavicharski]

Hi Nimish,

First you will have to hide the default file list. The following css will do that:

.ruInputs li:not(:last-child)
{
    display: none;
}

li.ruUploading
{
    display: none;
}

To add the uploaded files to the drop zone, handle OnClientFileUploaded event of the AsyncUpload and append the name of the uploaded file to the html element of the drop zone.

Regards,
Hristo Valyavicharski
Telerik

 

 

[Andre Light]

Note that set_dropZones is not currently working as one might expect.  In order to set drop zones dynamically on the client, you must call a hidden function to initialize the drop zones (Nencho at Telerik provided this workaround):

function AppLoaded() {
    var async = $find("<%= RadAsyncUpload1.ClientID%>");
    async.set_dropZones("#dropZone1,.otherDropZones");
    async._uploadModule._handleCustomDropZones();
}
Sys.Application.add_load(AppLoaded);

Thank you, Nencho.