How to set file input value when dropping file on page? [duplicate]

by

Disclaimer: Correct as of December 2017 and for modern browsers only.

TL;DR: Yes, now you can!

*if you have a dataTransfer or FileList object

Previously, programmatically changing the files input[type=file] field was disabled due to legacy security vulnerabilities, which are fixed on modern browsers.

The last of the major browsers (Firefox), has recently enabled us to set the files for the input file field. According to testing done by W3C, it seems that you can already do this on Google Chrome!

Relevant screenshot and text quoted from MDN:

enter image description here

You can set as well as get the value of HTMLInputElement.files in all modern browsers.
Source and browser compatibility, see MDN

The Firefox bugfix discussion thread has this demo you can test it out on, and here’s the source if you want to edit it. For future reference in case this link dies, I will also include it as a runnable snippet below:

let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');

target.addEventListener('dragover', (e) => {
  e.preventDefault();
  body.classList.add('dragging');
});

target.addEventListener('dragleave', () => {
  body.classList.remove('dragging');
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  body.classList.remove('dragging');
  
  fileInput.files = e.dataTransfer.files;
});
body {
  font-family: Roboto, sans-serif;
}

body.dragging::before {
  content: "Drop the file(s) anywhere on this page";
  position: fixed;
  left: 0; width: 100%;
  top: 0; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  background-color: rgba(255, 255, 0, .3);
  pointer-events: none;
}

button, input {
  font-family: inherit;
}

a {
  color: blue;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
      <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> 

  <title>JS Bin</title>
</head>
<body>
  
  <h1>Drag and drop files into file input</h1>
  
  <p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
  
  <p>
    <input type="file">
  </p>

</body>
</html>

Important note:

You can only do this if you have an existing FileList OR dataTransfer object that you are able to set to the input file element (as the setter method DOES NOT accept plain text strings).

For further information, see Kaiido’s answer here: How to set File objects and length property at FileList object where the files are also reflected at FormData object?

Now to answer your original question, it should be as simple as this:

document.querySelector('.preview-image-instruction')
    .addEventListener('drop', (ev) => {
        ev.preventDefault();
        document.querySelector('.image-url').files = ev.dataTransfer.files;
    });

More Related Contents:

  1. How can I get jQuery .val() AFTER keypress event?
  2. jQuery Change event on an element – any way to retain previous value?
  3. Stop form refreshing page on submit
  4. jQuery .live() vs .on() method for adding a click event after loading dynamic html
  5. How to capture the browser window close event?
  6. Detecting Browser Autofill
  7. Firing event on DOM attribute change
  8. Prevent form redirect OR refresh on submit?
  9. Image convert to Base64
  10. Check if option is selected with jQuery, if not select a default
  11. How to unbind a listener that is calling event.preventDefault() (using jQuery)?
  12. Handling key-press events (F1-F12) using JavaScript and jQuery, cross-browser
  13. How can I listen for a click-and-hold in jQuery?
  14. prevent Scroll bubbling from element to window
  15. How to get the containing form of an input?
  16. How do I use jQuery’s form.serialize but exclude empty fields
  17. Dynamically create and submit form
  18. Throttle event calls in jQuery
  19. How do you detect the clearing of a “search” HTML5 input?
  20. jQuery – select all text from a textarea
  21. JS Events: hooking on value change event on text inputs
  22. jQuery events .load(), .ready(), .unload()
  23. Get the clicked object that triggered jquery blur() event [duplicate]
  24. Prevent onclick action with jQuery
  25. How to prevent form element from sending some fields we don’t want?
  26. How do you limit options selected in a html select box?
  27. Is there an equivalent to e.PageX position for ‘touchstart’ event as there is for click event?
  28. Fire oninput event with jQuery
  29. copying the value of a form’s file input field to another form’s input field
  30. How to capture browser close event?

Leave a Comment