title: drop/ondrop Event listener not firing on drag and drop
body: <p>I have a HTML file that has a drop zone for someone to drop a file into and a javascript to process that file. dragenter, dragover, and other events work fine but the drop event does not detect that a file was dropped into the area. Any ideas?</p>
  <p><strong>drag.js</strong></p>
  <pre><code>
  let dropArea=document.getElementById(&quot;dropZone&quot;);
  dropArea.addEventListener(&quot;drop&quot;,function() {
      console.log(&quot;File entered&quot;);
  });
  
  
  </code></pre>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;sample/title&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./style.css&quot; media=&quot;screen&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;sample1 &lt;/h1&gt;
  
      &lt;h2&gt;Enter target file name&lt;/h2&gt;
      &lt;input id=&quot;testForm&quot;&gt;&lt;/input&gt;
      &lt;button id=&quot;myButton&quot;&gt;scan&lt;/button&gt;
      &lt;div id=&quot;dropZone&quot; class=&quot;dropZone&quot; &gt;
        &lt;p&gt;Drag your files here&lt;/p&gt;
    &lt;/div&gt;
      
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  &lt;script src=&quot;index.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;drag.js&quot;&gt;&lt;/script&gt;
  
  </code></pre>
  <p>I will include the css file as well for continuity sake.
  <strong>style.css</strong></p>
  <pre><code>#dropZone{
      background-color: rgb(150, 150, 252);
      color:black;
      text-align: center;
      width:300px;
      height:300px;
  }
  </code></pre>