title: HTML5's File API - How to know what's being dragged on?
body: <p>I've just started working with HTML5's File API. I've been able to mimick imgur's behavior: when a file is being dragged into the document, a big overlay appears with a message to drop to start uploading.</p>
  
  <p>However, I just noticed something: <strong>if you drag any element in the page (text, images), the overlay shows up</strong>. You can try it on <a href="http://imgur.com/" rel="nofollow">imgur</a>, it's the same thing that happens with my code.</p>
  
  <p>Altough when releasing, nothing actually happens because the script will check if there are files to upload. My question is, <strong>how to know beforehand what's being dragged in the document?</strong> At first I thought it was not possible since imgur and all the <a href="http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html" rel="nofollow">demos</a> <a href="http://html5demos.com/file-api" rel="nofollow">out</a> there have the same issue.</p>
  
  <p>To my surprise, Gmail can detect whether it's a file or just something else that's being dragged on, but it would be fairly impossible to trackback the snippet.</p>
  
  <p>(I can provide code if you want, however it's pretty simple: the events <code>dragenter</code>, <code>dragover</code> and <code>drop</code> are added to the <code>document</code> element and everything is handled as in the demos)</p>
  
  <p>Thanks.</p>
  
  <h2>Update</h2>
  
  <p>robertc's answer is correct, that seems to be the way to check for Firefox. By trial and error, I've found a way to check with Chrome:</p>
  
  <pre><code>event.originalEvent.dataTransfer.types.indexOf('Files')
  </code></pre>
  
  <p>It will return <code>-1</code> if there are no files. So you can now do something like:</p>
  
  <pre><code>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){}
  </code></pre>
  
  <p>However I don't think that's the best way to test it, but adding both conditionals in the <code>try</code> will not work.</p>