javascript - 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

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/

e.g. by using Drang'n'Drop events: e.dataTransfer.getFilesAndDirectories();

or by 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/