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

Question

I have a drop zone where I want to detect whether the dragged item is a folder or file. In chrome I achieved this by using

for (var i = 0; i < nrOfFiles; i++) {
    var entry = e.originalEvent.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isDirectory) {
        //folder detection
}

In firefox it is not possible to use the above solution(webkit) and after spending many hours trying to solve this I came up with the following solutions (and failed)

1. I check whether the dragged item has no type and no size as below and in most cases it is working as expected. From what I've read this is not efficient and not successful all the times as some files may not have file extension so I try to read file as binary string(readAsBinaryString) or readAsArrayBuffer with FileReader API and catch the exception in case the item is not readable but the exception is never thrown.

   var files = e.originalEvent.dataTransfer.files;
   for (var i = 0; i < nrOfFiles; i++) {
   if (files[i].size === 0 && files[i].type==="") {
   
       try{
          var reader = new FileReader();
           reader.readAsBinaryString(files[i]);
       }catch(e){
           //folder detection ?
       }
   
   }}
   

2. In the following solution i am trying to use mozGetDataAt which is the corresponding webkitGetAsEntry (??? Not 100% about this please correct me if i am wrong) but i am getting a security exception.

   var entry = e.originalEvent.dataTransfer.mozGetDataAt("application/x-moz-file",i);
   if (entry.isDirectory) { //not even reaching this statement. idk if isDirectory is applicable to entry
       //folder detection?
   }
   

And the exception is :

Permission denied for http://localhost:8080 to create wrapper for object of class UnnamedClass

Is there actually a way to do this in firefox? I do not want to rely on third party libraries or server side processing if possible. Any suggestions-comments would be much appreciated.

Answer 1

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!

Answer 2

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/

Answer 3

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.