Das Erkennen von Ordnern/Verzeichnissen in JavaScript-FileList-Objekten.

Question

Ich habe kürzlich etwas Code zu Moodle beigetragen, der einige der Möglichkeiten von HTML5 nutzt, um das Hochladen von Dateien in Formularen per Drag & Drop vom Desktop aus zu ermöglichen (der Kern des Codes befindet sich hier: https://github.com/moodle/moodle/blob/master/lib/form/dndupload.js als Referenz).

Dies funktioniert gut, außer wenn ein Benutzer einen Ordner / Verzeichnis anstelle einer echten Datei zieht. Dann werden Mülldateien auf den Server hochgeladen, aber mit dem Dateinamen des Ordners.

Was ich suche, ist eine einfache und zuverlässige Möglichkeit, das Vorhandensein eines Ordners im Dateilisten-Objekt zu erkennen, damit ich ihn überspringen kann (und wahrscheinlich auch eine freundliche Fehlermeldung zurückgeben kann).

Ich habe die Dokumentation auf MDN durchsucht, sowie eine allgemeine Websuche gemacht, aber nichts gefunden. Ich habe auch die Daten in den Chrome-Entwicklertools durchgesehen und es scheint, dass der 'Typ' des Dateiobjekts konsistent auf "" für Ordner gesetzt ist. Ich bin jedoch nicht ganz überzeugt, dass dies die zuverlässigste Methode zur plattformübergreifenden Erkennung ist.

Hat jemand bessere Vorschläge?

Answer 1

Die beste Option ist, sowohl die 'progress' als auch die 'load' Ereignisse auf einer FileReader-Instanz zu verwenden.

var fr = new FileReader();
var type = '';

// Das Lesen von Dateien vorzeitig abbrechen.
fr.addEventListener('progress', function(e) {
    console.log('Fortschritt - gültige Datei');

    fr.abort();

    type = 'Datei';
});

// Die gesamte Datei lädt, bevor ein Fortschrittsereignis eintritt.
fr.addEventListener('load', function(e) {
    console.log('geladen - gültige Datei');

    type = 'Datei';
});

// Keine Datei. Möglicherweise ein Verzeichnis.
fr.addEventListener('error', function(e) {
    console.log('Fehler - keine Datei oder nicht lesbar für den Webbrowser');
});

fr.readAsArrayBuffer(datei);

Dies löst den Fehlerhandler aus, wenn ein Verzeichnis übergeben wird, und die meisten Dateien werden den Fortschritts-Handler nach dem Lesen von nur wenigen KB auslösen. Ich habe beide Ereignisse ausgelöst gesehen. Das Auslösen von abort() im Fortschritts-Handler stoppt den FileReader davon, mehr Daten von der Festplatte in den RAM zu lesen. Dadurch können wirklich große Dateien abgelegt werden, ohne alle Daten solcher Dateien in den RAM zu lesen, nur um festzustellen, dass es sich um Dateien handelt.

Es mag verlockend sein zu sagen, dass bei einem Fehler die Datei ein Verzeichnis ist. Es gibt jedoch eine Reihe von Szenarien, in denen die Datei vom Webbrowser nicht lesbar ist. Am sichersten ist es, den Fehler einfach dem Benutzer zu melden und das Element zu ignorieren.

Answer 2

Ein einfache Methode ist wie folgt:

1. Überprüfe, ob der Dateityp type ein Leerzeichen ist: type === ""

2. Überprüfe, ob die Dateigröße size 0, 4096 oder ein Vielfaches davon ist: size % 4096 === 0.

   if (file.type === "" && file.size % 4096 === 0) { // Die Datei ist ein Ordner } else { // Die Datei ist kein Ordner }

Hinweis: Es könnte zufällig Dateien ohne Dateierweiterung geben, die die Größe eines Vielfachen von 4096 haben. Auch wenn dies nicht sehr oft passiert, sei dir dessen bewusst.

---

Zur Referenz siehe bitte die großartige Antwort von Benutzer Marco Bonelli zu einem ähnlichen Thema. Dies ist nur eine kurze Zusammenfassung davon.