Disable Drag & Drop

13 posts, 0 answers
  1. Dave Wolf
    Dave Wolf avatar
    33 posts
    Member since:
    Feb 2006

    Posted 16 Sep 2012 Link to this post

    How can I disable the ability to drag and drop files from my file system to the upload control while still being able to use async?  I noticed it causes problems when you try to drag multiple files to a upload control that is set to "multiple:false".
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 18 Sep 2012 Link to this post

    Hi,

    We should really make this into an option, but for the moment you can disable the D&D support using:

    kendo.ui.Upload.fn._supportsDrop = function() { return false; }

    This script should be executed immediately after including the Kendo UI scripts and before instantiating an Upload.

    I hope this helps.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. beauXjames
    beauXjames avatar
    20 posts
    Member since:
    Aug 2012

    Posted 13 Feb 2013 Link to this post

    Any updates to this issue? We instantiate the control as ::
    $("#uploaderID").kendoUpload({
        async: { ... },
        multiple: false,
        showFileList: false,
        select: function (e) { ... },
        upload: function () { ... },
        complete: function () { ... },
        error: function (ex) { ... }
    });
    Still can't turn off the dropZone
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 20 Feb 2013 Link to this post

    Hello,

    I've prepared a small sample with the latest version on jsBin: http://jsbin.com/itidis/2/edit

    Please verify that the script block is executed before instantiating the Upload.

    Regards,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. PeterS
    PeterS avatar
    5 posts
    Member since:
    Jan 2012

    Posted 21 Nov 2014 Link to this post

    I tried to remove the drag and drop in the AngularJS version, but couldn't make this work. How do I execute the script block before instantiating the file upload, as in angular we have a kendo-upload directive in the HTML markup?

    Thanks
    Pablo
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 24 Nov 2014 Link to this post

    Hello Pablo,


    The approach is working correctly on my side, when the widget is initialized via Angular directive. Here is a small example that demonstrates it.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Matt
    Matt avatar
    1 posts
    Member since:
    Jul 2013

    Posted 23 Apr 2015 in reply to T. Tsonev Link to this post

    I know this is a pretty old thread but is there a cleaner way to do this now? 

    All I want is the button, no dropzone, no file list and no "done" text in the drop zone after an upload.  

    I used this hack to remove the dropzone and .ShowFileList(false) to remove the file list. Unfortunately as soon as i successfully upload a file the dropzone reappears with the text "Done". I have tried calling kendo.ui.Upload.fn._supportsDrop = function() { return false; }

     again in the complete event but it doesn't disappear.

     

    Thanks,

    Matt

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 24 Apr 2015 Link to this post

    Hello Matt,

    This behavior is not supported by the Upload widget out of the box. The upload status message and the gray wrapper will be re-displayed after each file upload.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 20 Jun 2015 in reply to Dimiter Madjarov Link to this post

    I'm trying to accomplish the same thing as Matt, is there no workaround or even hack to do this?
  11. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 20 Jun 2015 Link to this post

    Never mind I was able to do it by playing with the CSS, would still like to know if there is a better way though.

     

  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 23 Jun 2015 Link to this post

    Hello Kjell,

    As stated previously the behavior is not supported out of the box, so indeed custom CSS modifications will be required to make it work.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Robert
    Robert avatar
    16 posts
    Member since:
    Feb 2014

    Posted 15 Dec 2015 in reply to T. Tsonev Link to this post

    I have two upload controls on my page and I want to disable the drop zone on only one of them. 

    The problem with using your javascript line is it disables it on both.

     How do I disable it on only one?

  14. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 17 Dec 2015 Link to this post

    Hello Robert,

    This could be achieved by overriding the _supportsDrop function twice before the initialization of each Upload widget. Here is an example, that demonstrates the approach. Keep in mind that this will lead to small difference in the look of the two widgets (as you can see in the demo), which is expected, because the dropzone adds some additional CSS styles. You could add those manually if the Uploads should look the same.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready