Disable file drag and drop if there is no file input

Question

I think the solution to this is looking in my face, but I cannot find it.

So, I am creating a site with a small file upload section. In the download section, an image will be downloaded for different devices and device orientations (for example, iPhone, iPad, portrait and landscape). I can easily understand how to implement drag-and-drop onto the icons of individual devices, but if the user skips the drag-and-drop area, the browser will simply navigate to this image on their system. How to disable drag and drop if there is no file input type to get the dragged file?

Answer 1

This document (documentation for the jQuery file upload module) shows how to disable the default action for the browser: https://github.com/blueimp/jQuery-File-Upload/wiki/Drop-zone-effects

Quoting a document:

If you want to allow specific redirection zones, but disable the default browser action to delete files in the document, add the following JavaScript code:

$(document).bind('drop dragover', function (e) { e.preventDefault(); }); 

Note that the default action prevention for the drop and dragover events is required to disable the default browser delete action.

Answer 2

Perhaps this does not apply to the topic, but it is just the opposite. If you do not want to drag the file into the input file loader, you can use

 $('body').on('drop', function (e) { return false; }); 

It worked for me both in IE 11 and in chrome. Thanks to Francois for your recommendations.

Answer 3

dropzone should be inside the form without any HTML elements:

 <form id="frmdropzone" class="dropzone" action="Save" method="post" enctype="multipart/form-data"> <div class="dropzone-previews"></div> </form> 

Answer 4

To improve Jan's answer, if you do not want to disable the drag and drop of file input elements:

 $(document).bind("drop dragover", function(e){ if(e.target.type != "file"){ e.preventDefault(); } });