Input[type=file] in das Filesystem API einbinden

Angenommen, Sie haben eine App zur Fotobearbeitung und möchten, dass Nutzer Hunderte von Fotos hineinziehen und in Ihre App kopieren können. Was machen Sie jetzt?

Demo starten
Demo starten

In einem aktuellen Beitrag hebt Eiji Kitamura eine subtile, aber leistungsstarke neue Funktion in den Drag-and-drop-APIs hervor: die Möglichkeit, Ordner per Drag-and-drop in die Zwischenablage zu ziehen und als HTML5 Filesystem API FileEntry- und DirectoryEntry-Objekte abzurufen (durch den Zugriff auf eine neue Methode in DataTransferItem, .webkitGetAsEntry()).

Das Tolle an der .webkitGetAsEntry()-Erweiterung ist, dass sie das Importieren von Dateien und ganzen Ordnern ermöglicht. Wenn FileEntry oder DirectoryEntry aus einem Drop-Ereignis stammen, kannst du es über die copyTo() der Filesystem API in deine App importieren.

Beispiel für das Kopieren mehrerer abgelegter Ordner in das Dateisystem:

var fs = null; // Cache filesystem for later.

// Not shown: setup drag and drop event listeners.
function onDrop(e) {
    e.preventDefault();
    e.stopPropagation();

    var items = e.dataTransfer.items;

    for (var i = 0, item; item = items[i]; ++i) {
    var entry = item.webkitGetAsEntry();

    // Folder? Copy the DirectoryEntry over to our local filesystem.
    if (entry.isDirectory) {
        entry.copyTo(fs.root, null, function(copiedEntry) {
        // ...
        }, onError);
    }
    }
}

window.webkitRequestFileSystem(TEMPORARY, 1024 * 1204, function(fileSystem) {
    fs = fileSystem;
}, function(e) {
    console.log('Error', e);
});

Sehr schön! Nochmals die Einfachheit ergibt sich aus der Integration von DnD in die Filesystem API-Aufrufe.

Jetzt haben Sie auch die Möglichkeit, einen Ordner und/oder Dateien per Drag-and-drop auf einen normalen <input type="file"> zu ziehen und dann als Dateisystemverzeichnis oder als Dateieinträge auf die Einträge zuzugreifen. Dies erfolgt über .webkitEntries:

<input type="file" multiple>
function onChange(e) {
    e.stopPropagation();
    e.preventDefault();

    var entries = e.target.webkitEntries; // Get all dropped items as FS API entries.

    [].forEach.call(entries, function(entry) {

    // Copy the entry into our local filesystem.
    entry.copyTo(fs.root, null, function(copiedEntry) {
        ...
    }, onError);

    });
}

document.querySelector('input[type="file"]').addEventListener('change', onChange);

Ich habe eine Fotogalerie-Demo zusammengestellt, um diese verschiedenen Techniken zum Importieren von Dateien/Ordnern zu demonstrieren.

Demo zur Markteinführung

Weitere Informationen zur HTML5 Filesystem API finden Sie unter Filesystem APIs kennenlernen.