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

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.