drag drop files into standard html file input

by

The following works in Chrome and FF, but i’ve yet to find a solution that covers IE10+ as well:

// dragover and dragenter events need to have 'preventDefault' called
// in order for the 'drop' event to register. 
// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  // pretty simple -- but not for IE :(
  fileInput.files = evt.dataTransfer.files;

  // If you want to use some of the dropped files
  const dT = new DataTransfer();
  dT.items.add(evt.dataTransfer.files[0]);
  dT.items.add(evt.dataTransfer.files[3]);
  fileInput.files = dT.files;

  evt.preventDefault();
};
<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
</body>
</html>

You’ll probably want to use addEventListener or jQuery (etc.) to register your evt handlers – this is just for brevity’s sake.

More Related Contents:

  1. Does HTML5 allow drag-drop upload of folders or a folder tree?
  2. How to set a value to a file input in HTML?
  3. How to check file MIME type with javascript before upload?
  4. How do I remove a file from the FileList
  5. Remember and Repopulate File Input [duplicate]
  6. How to resolve the C:\fakepath?
  7. Client Checking file size using HTML5?
  8. Using HTML5 file uploads with AJAX and jQuery
  9. Reading uploaded text file contents in html
  10. Get Base64 encode file-data from Input Form
  11. How to select multiple files with ?
  12. HTML5 dragleave fired when hovering a child element
  13. get the data of uploaded file in javascript
  14. Integrating Dropzone.js into existing HTML form with other fields
  15. How FileReader.readAsText in HTML5 File API works?
  16. HTML5 Drag and Drop anywhere on the screen
  17. HTML5 Drag & Drop Change icon/cursor while dragging
  18. Simulate drop file event
  19. Drag-and-drop file uploading without AJAX, synchronously in the foreground?
  20. Prevent browser from loading a drag-and-dropped file
  21. How to use jQuery’s drop event to upload files dragged from the desktop?
  22. HTML5 drop event doesn’t work unless dragover is handled
  23. Detecting HTML5 Drag And Drop support in javascript
  24. How to determine presence of HTML5 drag’n’drop file upload API (like the one from FF3.6)
  25. What is the best way to upload a folder to a website?
  26. html5 drag and drop FOR MOBILE [duplicate]
  27. copying the value of a form’s file input field to another form’s input field
  28. javascript: upload image file and draw it into a canvas
  29. how to get full path from fileupload using Javascript
  30. trigger file upload dialog using javascript/jquery

Leave a Comment