Disable File drag & drop if there isn't a file

Question

I think the solution to this is staring me in the face, but I can't seem to find it.

So, I'm making a site that has a small file upload section. The upload section will have a place to upload an image for different devices and device orientations (i.e. iPhone, iPad, portrait and landscape). I can easily figure out how to implement the drag & drop on the individual device icons, but if the user misses the drop area, the browser will just navigate to that image on their system. How do I disable drag & drop if there isn't a file input type to receive the dragged file?

Answer 1

the dropzone must 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 2

To improve on Jan's answer, if you don't want to disable the drag & drop on file input elements:

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

Answer 3

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

Quoting the document:

If you want to allow specific drop zones but disable the default browser action for file drops on the document, add the following JavaScript code:

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

Note that preventing the default action for both the "drop" and "dragover" events is required to disable the default browser drop action.

Answer 4

This might not be relevant to the topic, but it is just reverse. If you don't want to drag-drop file in input file up-loader, you can use

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

It worked for me in both IE 11 and chrome. Thanks Francois for your similar guidelines