HTML5 drag and drop folder detection in firefox. Is it even possible?

by

It IS possible in Firefox 42 and upwards (https://developer.mozilla.org/en-US/Firefox/Releases/42, https://nightly.mozilla.org/):

https://jsfiddle.net/28g51fa8/3/

Using drag-and-drop events: e.dataTransfer.getFilesAndDirectories();

Or, using a new input dialog, letting the user select between files or folder upload:

<input id="dirinput" multiple="" directory="" type="file" />
<script>
var dirinput = document.getElementById("dirinput");
dirinput.addEventListener("change", function (e) {
  if ('getFilesAndDirectories' in this) {
    this.getFilesAndDirectories().then(function(filesAndDirs) {
        for (var i=0, arrSize=filesAndDirs.length; i < arrSize; i++) {
            iterateFilesAndDirs(filesAndDirs[i]);
        }
    });
  }
}, false);
</script>

Related Bugzillas:

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310 (Implement MS’s proposal for a reduced subset of the new FileSystem API)

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 (Ship directory picking and directory drag and drop)

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924 (Support filtering of Directory::GetFilesAndDirectories)

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21 (Released in Firefox 50, november 2016)

Code partially from:
https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop (https://archive.is/ZBEdF)

Unfortunatelly not in MS Edge so far:
https://dev.modern.ie/platform/status/draganddropdirectories/ update: edge seems supported now.

More Related Contents:

  1. ReferenceError: event is not defined error in Firefox
  2. Download attribute not working in Firefox
  3. Web browser: Hide mouse cursor [duplicate]
  4. Can I call jQuery’s click() to follow an link if I haven’t bound an event handler to it with bind or click already?
  5. How to get numeric value from a prompt box? [duplicate]
  6. Submit multiple forms with one submit button
  7. How to set value of input text using jQuery
  8. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  9. How to display JavaScript variables in a HTML page without document.write
  10. How to make a link open multiple pages when clicked
  11. How to dynamically create ‘@-Keyframe’ CSS animations?
  12. Check Ctrl / Shift / Alt keys on ‘click’ event
  13. Text blinking jQuery
  14. jQuery vs document.querySelectorAll
  15. Mozilla firefox not working with window.onbeforeunload
  16. Choosing Mobile Web HTML5 Framework [closed]
  17. HTML5 callbacks?
  18. How to read line by line of a text area HTML tag
  19. Show text letter by letter
  20. Proper way to detect WebGL support?
  21. collapse and expand tabs jquery / simple accordion
  22. jQuery DataTables “No Data Available in Table”
  23. Gaussian Blur onHover Using jQuery
  24. Wrapping lists into columns
  25. Close a SELECT dropdown list programmatically with Javascript/jQuery
  26. refresh div with jquery
  27. focus on next tabindex of HTML element onEnter keypress by JQuery
  28. Jquery change text between two elements
  29. Remove everything within script and style tags
  30. Possible to reverse a css animation on class removal?

Leave a Comment