CODEWITHSUNDEEP
javascriptfile-uploaddrag-and-dropfileapi
CJT3
CJT3

Reputation: 2908

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

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?

Upvotes: 6

Views: 15837

Answers (4)

Luis Castro
Luis Castro

Reputation: 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>

Upvotes: 0

Pravin Belurkar
Pravin Belurkar

Reputation: 21

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

Upvotes: 1

Fran&#231;ois Lavigne
Fran&#231;ois Lavigne

Reputation: 64

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

Upvotes: -1

John Dvorak
John Dvorak

Reputation: 27277

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.

Upvotes: 15

Related Questions