Disable Drag & Drop

[Dave Wolf]

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

[T. Tsonev]

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

[beauXjames]

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

[T. Tsonev]

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

[Pablo]

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

[Dimiter Madjarov]

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

 

 

[Matt]

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

[Dimiter Madjarov]

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

 

 

[Kjell]

I'm trying to accomplish the same thing as Matt, is there no workaround or even hack to do this?

[Kjell]

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.

 

[Dimiter Madjarov]

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

 

 

[Robert]

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?

[Dimiter Madjarov]

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