HTML5 File API - how do I know what is being delayed?

Question

I just started working with the HTML5 file API. I managed to imitate the behavior of imgur: when a file is dragged into a document, a large overlay appears with a message sent to start the download.

However, I just noticed something: if you drag any element on the page (text, images), an overlay will appear . You can try it on imgur , this is the same thing that happens with my code.

Upstairs, nothing happens during the release because the script checks to see if there are any files to download. My question is: how to know in advance what is dragging in a document? At first I thought this was not possible, since imgur and all demos out have the same problem.

To my surprise, Gmail can determine if it will be a file or just something else that will be dragged, but it would be impossible to track the fragment.

(I can provide the code, if you want, but it is quite simple: the event dragenter, dragoverand dropadded to the element document, and all handled the same way as in the demonstrations)

Thank.

Update

Robertc's answer is correct, which seems like a way to test Firefox. By trial and error, I found a way to check with Chrome:

event.originalEvent.dataTransfer.types.indexOf('Files')

-1, . , - :

try {
    if(event.originalEvent.dataTransfer.types.indexOf('Files') == -1){
        return false;
    }
} catch(E){}

try {
    if(!event.originalEvent.dataTransfer.types.contains("application/x-moz-file")){
        return false;
    }
} catch(E){}

, , try .

Answer 1

dragover/dragenter. Firefox application/x-moz-file, :

function checkDrag(event) {
    return event.dataTransfer.types.contains("application/x-moz-file");
}

, .

Answer 2

, URL-, .. () handleDrop (event):

if(typeof event.dataTransfer.files == "undefined" || 
     event.dataTransfer.files.length == 0)
        return;

.