Wykrywanie folderów HTML5 metodą przeciągania i upuszczania w Firefoksie. Czy to możliwe?

Question

Wiem, że ten problem może być duplikatem, ale ponieważ żadne z istniejących rozwiązań nie może mi pomóc, publikuję mój własny problem. Mam obszar upuszczania, w którym chcę wykryć, czy przeciągnięty element jest folderem, czy plikiem. W chromie i osiągnąć to za pomocą

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

w firefox nie jest możliwe zastosowanie powyższy roztwór (WebKit), a po spędzeniu wielu godzin próbuje rozwiązać ten wpadłem następujących rozwiązań (i nie),

1. Sprawdzam, czy przeciągany przedmiot nie ma typu i rozmiaru, jak poniżej iw większości przypadków działa zgodnie z oczekiwaniami. Z tego, co przeczytałem, to nie jest wydajne i nie powiodło się przez cały czas, ponieważ niektóre pliki mogą nie mieć rozszerzenia pliku, więc próbuję odczytać plik jako ciąg binarny (readAsBinaryString) lub readAsArrayBuffer z API FileReader i wychwycić wyjątek w przypadku, gdy element jest nieczytelne, ale wyjątek nigdy nie jest rzucany.

     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. W poniższym roztworem Próbuję użyć mozGetDataAt która jest odpowiednia webkitGetAsEntry (??? Nie 100% o to proszę mnie poprawić, jeśli się mylę), ale otrzymuję wyjątek zabezpieczeń.

     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? 
         } 
   

i wyjątek jest:

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

Czy istnieje sposób, aby rzeczywiście to zrobić w firefox? Nie chcę polegać na bibliotekach stron trzecich lub przetwarzaniu po stronie serwera, jeśli to możliwe. Wszelkie sugestie-komentarze będą mile widziane.

Dzięki

M

Answer 1

Prosta odpowiedź na to pytanie brzmi „nie” nie ma sposobu, aby przeczytać folder za pomocą przeciągania i upuszczania w Firefoksie.

Wygląda na to, że nie ma standardu HTML5 do obsługi folderów (jeszcze). Zdolność Chrome do obsługi folderów jest czymś niestandardowym (poza standardami) wbudowanym w przeglądarkę.

Obecnie nie ma sposobu na przeciąganie i upuszczanie folderów w Firefoksie (lub IE wierzę) za pomocą HTML5/Javascript. Jest "błąd" w tej funkcji na Mozilla's bugzilla i wspomina, że ​​W3C obecnie przerwał tworzenie standardowej specyfikacji dla interfejsu API systemu plików, który obejmuje katalogi (chociaż jest to editor's draft). Ten błąd Mozilli jest nadal w stanie NOWY i nie pojawia się przypisany/wzięty.

Firma Microsoft ma this unofficial edge document na temat funkcji, która może być interesująca, jeśli masz również pytania dotyczące wypróbowania tego w IE.

Answer 2

możliwe jest Firefox 42 i w górę (https://developer.mozilla.org/en-US/Firefox/Releases/42, https://nightly.mozilla.org/)

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

npza pomocą zdarzeń Drang'n'Drop: e.dataTransfer.getFilesAndDirectories();

lub przy użyciu nowego okna wejściowego, pozwalając użytkownikowi wybrać między plików lub folderów Dodano:

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

pokrewne Bugzillas:

https://bugzilla.mozilla.org/show_bug.cgi?id=1164310 (Wdrożyć propozycję MS dla zredukowanego podzbioru nowego API FileSystem)

https://bugzilla.mozilla.org/show_bug.cgi?id=1188880 (Wybieranie katalogu statków oraz przeciąganie i upuszczanie katalogu)

https://bugzilla.mozilla.org/show_bug.cgi?id=1209924 (filtrowanie Wsparcie katalog :: GetFilesAndDirectories)

https://bugzilla.mozilla.org/show_bug.cgi?id=876480#c21 (Wydany w Firefoksie 50, listopad 2016)

Kod częściowo od: https://jwatt.org/blog/2015/09/14/directory-picking-and-drag-and-drop (https://archive.is/ZBEdF)

niestety nie w MS Edge do tej pory: https://dev.modern.ie/platform/status/draganddropdirectories/

Answer 3

Oto co zrobiłem, aby rozwiązać ten 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 
     } 
    } 
} 

zasadniczo:

• Jeśli wpis drag-and-drop ma typ MIME, to jest to plik
• W przeciwnym razie, spróbuj odczytać zawartość wpisu
  • Przeczytaj tylko pierwsze 5 bajtów (aby uniknąć przypadkowego załadowania dużych plików do pamięci): ent.slice(0, 5)
  • Jeśli odczyt się powiedzie, to jest to plik
  • Jeśli odczyt nie powiedzie się, to jest to katalog

Enjoy!