title: Detect when a file is dragged onto a file input
body: <p>I have this code to detect when a user clicks a file input to upload a file.</p>
  
  <pre><code>$('input:file').click(function() {
      // do stuff here
  });
  </code></pre>
  
  <p>I discovered that many users are dragging files onto the file input to upload a file, and this is not triggering when that happens. I considered <code>mouseover</code>, perhaps in combination with <code>mouseup</code>, but I'm not sure how I would know if the user was holding a file while doing that.</p>
  
  <p>To clarify, I do not need help implementing drag and drop. Also, if possible I want to keep using the file input, and not use a a solution involving dropping onto other elements such as a div. I want the drop to remain on the actual file input.</p>
  
  <p>How can I detect a file being dragged on a file input so that I can react to it?</p>