title: File drag and drop in IE11 and Firefox
body: <p>I am trying to create a drop box where image files can be dragged for upload.  This works fine in Chrome and Edge.  However, I am having troubles in Firefox and IE 11.  For example, in IE 11, when I click on the browse button, a window pops up titled, "Choose File to Upload."  If I click an Image and click "open" it works fine, but I can't drag any files out of the window.  However, if I open my file explorer, I can drag and drop images just fine from the File Explorer window. A similar thing happens in Firefox.  I can drag images from File Explorer just fine, but when I try to drag from the popup window titled "File Upload", I get a ghost image with a circle and red slash.  Some threads here have suggested using a dragstart function, but that does not seem to be working, probably because the documentation says "Note that dragstart and dragend events are not fired when dragging a file into the browser from the OS."  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API</a></p>
  
  <p>So is there a way I can drag files from the file upload window in these browsers as opposed to having to open file explorer?  Again, I can drag and drop from the popup in Chrome and Edge.  </p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>    Files: &lt;input type="file" id="fileInput" name="files" multiple&gt;&lt;br /&gt;
  
      &lt;div id="selectedFiles"&gt;&lt;/div&gt;
  
      &lt;div class="picList"&gt;
          &lt;div id="dropbox" style="border:1px solid black;height:500px;"&gt;
               Drop Here
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my javascript:</p>
  
  <pre><code>dropbox = document.getElementById("dropbox");
  dropbox.addEventListener("dragenter", dragenter, false);
  dropbox.addEventListener("dragover", dragover, false);
  dropbox.addEventListener("drop", drop, false);
  function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
  }
  
  function dragover(e) {
      e.stopPropagation();
      e.preventDefault();
  }
  function drop(e) {
      e.stopPropagation();
      e.preventDefault();
  
      var dt = e.dataTransfer;
      var files = dt.files;
  
      handleFiles(files);
  }
  </code></pre>
  
  <p>Any advice?</p>
  
  <p>Edit:</p>
  
  <p>Here is my handleFiles function (dupCheck is an array to check for duplicates and stored files is an array of files to be uploaded, which I need because I want users to be able to delete a file by deleting the preview image and HTML FileReader is read only so I can't delete single images directly from the file stack.):</p>
  
  <pre><code>    function handleFiles(files) {
      for (var i = 0; i &lt; files.length; i++) {
          var file = files[i];
          var imageType = /^image\//;
  
          if (!imageType.test(file.type)) {
              continue;
          }
          var img = document.createElement("img");
          img.classList.add("obj");
          img.file = file;
          $(img).addClass('selFile');
          $(img).attr('data-file', file.name);
          var A = [];
          for (var z = 0; z &lt; dupCheck.length; z++) {
              A.push(dupCheck[z].name)
          }
          if (!A.includes(file.name)) {
              storedFiles.push(file);
              var _checker = { name: file.name };
              dupCheck.push(_checker);
              dropbox.appendChild(img);
              var reader = new FileReader();
              reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
              reader.readAsDataURL(file);
              A = [];
          };
      }
  }
  </code></pre>