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?

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?

• javascript
• file-upload
• drag-and-drop
• fileapi

• listen to drag&drop events on the whole page, reject and prevent default? – John Dvorak Commented Oct 26, 2012 at 7:08

4 Answers 4

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.

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

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>

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();
    }
});