AsyncUpload drop zone define in Javascript

6 posts, 0 answers
  1. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2013 Link to this post

    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+
  2. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 05 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aarsh
    Aarsh avatar
    192 posts
    Member since:
    Jun 2012

    Posted 05 Aug 2013 Link to this post

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

    Thanks again,
    -Aarsh
  5. Nimish
    Nimish avatar
    1 posts
    Member since:
    Aug 2013

    Posted 22 Mar 2014 Link to this post

    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 
  6. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 27 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  7. Andre Light
    Andre Light avatar
    11 posts
    Member since:
    Apr 2010

    Posted 18 May 2015 in reply to Hristo Valyavicharski Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017