title: Drag and Drop Image upload not working on certain browsers
body: <p>I'm working on adding a feature to our website that allows users upload an image by dragging it from the desktop and dropping it in the browser. I created a "drop zone" using a div, gave it a width and height, and added the dragover and drop event listeners to it. It works fine in Chrome and Edge, but is not working in Firefox, IE, or Opera. For those three browsers, as soon as I try and drag the image into the browser, the cursor changes to a circle with a slash through it indicating that the drag action will be cancelled. I know I have to prevent the browser defaults, because the default for Chrome is to copy the image address and display it in a new window. I was able to make it work for Chrome, but for some reason the code I have to prevent the defaults isn't working for those other 3 browsers.</p>
  
  <p>Here is the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-us"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Image Uploader&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;link href="css/StyleSheet.css" rel="stylesheet" /&gt;
      &lt;script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" defer&gt;&lt;/script&gt;
      &lt;script src="script/JavaScript.js" defer&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;input type="file" id="file" name="files[]" multiple onchange="startRead()"/&gt;
     &lt;div id="draghere"&gt;Drop Your files here &lt;span id="mouseposition"&gt;&lt;/span&gt;&lt;/div&gt;
     &lt;div id="op"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#draghere {
      width: 50%;
      height: 150px;
      border: 1px solid lightgray;
      font-size: 3em;
      text-align: center;
      padding-top: 50px;
  }
  </code></pre>
  
  <p>JavaScript (using JQuery):
  </p>
  
  <pre><code>window.addEventListener("dragover", function (e) {
      e = e || event;
      e.preventDefault();
  }, false);
  window.addEventListener("drop", function (e) {
      e = e || event;
      e.preventDefault();
  }, false);
  
  // Fired when uploading an image using the input button
  function startRead(evt) {
      var file = document.getElementById("file").files[0];
      if (file) {
          if (file.type.match("image.*")) {
              getAsImage(file);
              alert("Name: " + file.name);
          }
      }
  
      evt.stopPropagation();
      evt.preventDefault();
  }
  
  // Fired when uploading an image using drag and drop
  function startReadFromDrag(evt) {
      var file = evt.dataTransfer.files[0];
      if (file) {
          if (file.type.match("image.*")) {
              getAsImage(file);
              $("#draghere").css("background-color", "");
          }
      }
  
      evt.stopPropagation();
      evt.preventDefault();
  }
  
  function docolorchange(evt) {
      $("#draghere").css("background-color", "yellow");
  }
  
  function getAsImage(readFile) {
      var reader = new FileReader();
      reader.readAsDataURL(readFile);
      reader.onload = addImg;
  }
  
  function addImg(imgsrc) {
      // Display image
      $("#op").prepend("&lt;img src='" + imgsrc.target.result + "'/&gt;");
  
      // upload to server
  }
  
  // Add event Listeners to drop zone
  var droppingDiv = document.getElementById("draghere");
  droppingDiv.addEventListener("dragover", docolorchange, false);
  droppingDiv.addEventListener("drop", startReadFromDrag, false);
  </code></pre>
  
  <p>Am I missing something that would allow me to do the drag and drop in Firefox, IE, and Opera? According to what I've read about the Drag and Drop API, it should work in all browsers, but that is not the experience I've been having.</p>
  
  <p>Thanks in advance!</p>
  
  <p>UPDATE: The thing that makes this really strange is that the day I wrote this code, I tested it in all 5 browsers I mentioned and it worked in all of them. The next day, it stopped working in IE, Edge, and Opera. I didn't change a single line of code! It made me think it was an issue to do with the cache, so I cleared it on each browser, but still nothing...</p>