File input's input event and/or change event fire in Chrome and Opera, but not in Firefox, Edge or IE11

634 views javascript
1

I have created a Drag&Drop file uploader, and it works fine in Chrome and Opera. Firefox, Edge and Internet Explorer however, are giving me headaches.

I have the following minimal example (with console logging for convenience):

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      console.log("Document is ready.");

      document.addEventListener("drop", function(e) { // Fires on drop event
        console.log("Drop event recorded on document.");
        input = document.querySelector("#file-input"); // Find file input
        input.files = e.dataTransfer.files; // Set dropped files into file input
        e.preventDefault(); // Prevent default behavior (like opening the file(s) in the browser tab)
      });

      document.addEventListener("dragover", function(e) {
        console.log("Dragover event recorded on document.");
        e.preventDefault(); // Prevent default behavior (like opening the file(s) in the browser tab)
      });
    });

    function uploadFiles() {
      console.log("Function uploadFiles() called, it works in this browser!");
      // File upload logic here
      alert("Got new file(s), it works in this browser!");
    }
  </script>
</head>
<body>
  <h1>Test input event</h1>
  <p>Drop file(s) anywhere on the page to trigger the input event. The event is fired as expected in Chrome and Opera, but not in Firefox, Edge or Internet Explorer 11.</p>
  <p>When the event is fired, you will be notified by an alert message.</p>
  <input type="file" multiple id="file-input" oninput="console.log('oninput fired on input element.'); uploadFiles();" disabled/>
</body>
</html>

Chrome and Opera runs this page as we'd expect. The events are fired at the appropriate times, and the uploadFiles() function is eventually called.

Firefox, Edge and IE are able to fire the dragover and drop events, but the input event on the input element is not triggered when the file(s) are inserted from the dataTransfer.

I've been searching all day, and have found several similar questions, but none of the proposed solutions have worked for me.

answered question

1 Answer

5

Trigger the input event after you appended the file content

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      console.log("Document is ready.");

      document.addEventListener("drop", function(e) { // Fires on drop event
        console.log("Drop event recorded on document.");
        input = document.querySelector("#file-input"); // Find file input
        input.files = e.dataTransfer.files; // Set dropped files into file input
         $("#file-input").trigger('input');//trigger the upload
        e.preventDefault(); // Prevent default behavior (like opening the file(s) in the browser tab)
      });

      document.addEventListener("dragover", function(e) {
        console.log("Dragover event recorded on document.");
        e.preventDefault(); // Prevent default behavior (like opening the file(s) in the browser tab)
      });
    });

    function uploadFiles() {
      console.log("Function uploadFiles() called, it works in this browser!");
      // File upload logic here
      alert("Got new file(s), it works in this browser!");
    }
  </script>
</head>
<body>
  <h1>Test input event</h1>
  <p>Drop file(s) anywhere on the page to trigger the input event. The event is fired as expected in Chrome and Opera, but not in Firefox, Edge or Internet Explorer 11.</p>
  <p>When the event is fired, you will be notified by an alert message.</p>
  <input type="file" multiple id="file-input" oninput="console.log('oninput fired on input element.'); uploadFiles();" disabled/>
</body>
</html>

posted this

Have an answer?

JD

Please login first before posting an answer.