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

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/

Here's what I did to solve this problem:

var files = [];

for( var i = 0; i < e.dataTransfer.files.length; i++ ){
    var ent = e.dataTransfer.files[i];
    if( ent.type ) {
        // has a mimetype, definitely a file
        files.push( ent );
    } else {
        // no mimetype:  might be an unknown file or a directory, check
        try {
            // attempt to access the first few bytes of the file, will throw an exception if a directory
            new FileReader().readAsBinaryString( ent.slice( 0, 5 ) ); 
            // no exception, a file
            files.push( ent );
        } catch( e ) {
            // could not access contents, is a directory, skip
        }
    }
}

Basically:

• If the drag-and-drop entry has a mime type, then it is a file
• Otherwise, try to read the entry contents
  • Only read the first 5 bytes (to avoid loading large files into memory by accident): ent.slice( 0, 5 )
  • If the read succeeds, then it is a file
  • If the read fails, then this is a directory

Enjoy!

The simple answer to your question is "No" there is no way to read a folder using drag-and-drop in Firefox.

There does not seem to be an HTML5 standard for handling folders (yet). Chrome's ability to handle folders is something custom (outside of standards) they built into their browser.

Currently there is no way to do folder drag and drop in Firefox (or IE I believe) using HTML5/Javascript. There is a "bug" on this feature on Mozilla's bugzilla and it mentions that W3C has currently discontinued creating a standard spec for the File System API that covers directories (although there is this editor's draft). That Mozilla bug is still in the NEW status and does not appear assigned/taken.

Microsoft has this unofficial edge document on the feature which might be interesting if you also have questions about trying this in IE.