title: JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Uncaught TypeError: Cannot read property 'files' of undefined"
body: <p>I will advise you prior that I have limited JavaScript experience.
  <hr>
  Currently, I have the JavaScript code:</p>
  
  <pre><code>$('#xhr-filebox').bind({
      "dragover": HandleDragEvent,
      "dragleave": HandleDragEvent,
      "drop": HandleDropEvent
  });
  
  function HandleDropEvent(e){
      var files = e.target.files || e.dataTransfer.files;
      UploadFile(files[0]);
  }
  </code></pre>
  
  <p>(some code is omitted, but I will add more if you request)</p>
  
  <p>...and the HTML:</p>
  
  <pre><code>&lt;div class="filebox" id="xhr-filebox"&gt;
      &lt;p id="xhr-action"&gt;...or click me to pick one.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, when I drag a file into it, the Chrome JS console says this:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'files' of undefined</p>
  </blockquote>
  
  <p>It can however get the FileList object when reading from a file input.</p>
  
  <p>Curiously, when I log the event argument ( console.log(e) ), it logs it as f.event, whereas in a similar script of mine, it logs it as MouseEvent (screenshot: <a href="https://i.stack.imgur.com/3krcT.png" rel="noreferrer">http://i.stack.imgur.com/3krcT.png</a>)</p>
  
  <p>Unlike the bind() function in jQuery, this uses the addEventListener() function of a DOM object returned by getElementById(), IE this is pure JavaScript. I have tried that method but nothing new happens.</p>