This is a migrated thread and some comments may be shown as answers.

Disable Drag & Drop

12 Answers 2285 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Dave Wolf
Top achievements
Rank 1
Iron
Dave Wolf asked on 16 Sep 2012, 08:52 PM
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".

12 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 18 Sep 2012, 06:57 AM
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!
0
beauXjames
Top achievements
Rank 2
answered on 13 Feb 2013, 11:27 PM
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
0
T. Tsonev
Telerik team
answered on 20 Feb 2013, 08:20 AM
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!
0
Pablo
Top achievements
Rank 1
answered on 21 Nov 2014, 01:29 PM
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
0
Dimiter Madjarov
Telerik team
answered on 24 Nov 2014, 09:55 AM
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!
 
0
Matt
Top achievements
Rank 1
answered on 23 Apr 2015, 02:42 PM

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

0
Dimiter Madjarov
Telerik team
answered on 24 Apr 2015, 10:56 AM

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!
 
0
Kjell
Top achievements
Rank 1
answered on 20 Jun 2015, 07:22 PM
I'm trying to accomplish the same thing as Matt, is there no workaround or even hack to do this?
0
Kjell
Top achievements
Rank 1
answered on 20 Jun 2015, 08:23 PM

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.

 

0
Dimiter Madjarov
Telerik team
answered on 23 Jun 2015, 07:25 AM

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!
 
0
Robert
Top achievements
Rank 1
answered on 15 Dec 2015, 01:27 PM

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?

0
Dimiter Madjarov
Telerik team
answered on 17 Dec 2015, 09:44 AM

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!
 
Tags
Upload
Asked by
Dave Wolf
Top achievements
Rank 1
Iron
Answers by
T. Tsonev
Telerik team
beauXjames
Top achievements
Rank 2
Pablo
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Matt
Top achievements
Rank 1
Kjell
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Share this question
or