Mengintegrasikan input[type=file] dengan Filesystem API

Misalkan Anda memiliki aplikasi pengeditan foto dan ingin pengguna dapat menarik ratusan foto dan menyalinnya ke aplikasi Anda. Jadi, apa yang akan Anda lakukan?

Meluncurkan Demo
Launch Demo

Dalam postingan terbaru, Eiji Kitamura menyoroti fitur baru yang halus, tetapi canggih di API tarik lalu lepas; kemampuan untuk menarik folder dan mengambilnya sebagai objek FileEntry dan DirectoryEntry HTML5 Filesystem API (dilakukan dengan mengakses metode baru di DataTransferItem, .webkitGetAsEntry()).

Yang sangat keren dari ekstensi .webkitGetAsEntry() adalah cara elegannya dalam mengimpor file dan seluruh folder. Setelah Anda memiliki FileEntry atau DirectoryEntry dari peristiwa drop, Anda hanya perlu menggunakan copyTo() Filesystem API untuk mengimpornya ke aplikasi Anda.

Contoh menyalin beberapa folder yang dijatuhkan ke sistem file:

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);
});

Bagus sekali! Sekali lagi, kesederhanaan berasal dari integrasi DnD dengan panggilan Filesystem API.

Lebih jauh lagi, kita juga dapat menarik lalu melepas folder dan/atau file ke <input type="file"> normal, lalu mengakses entri sebagai direktori Filesystem atau entri file. Hal ini dilakukan melalui .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);

Saya telah membuat demo galeri foto untuk menunjukkan berbagai teknik ini dalam mengimpor file/folder.

Meluncurkan Demo

Untuk mempelajari HTML5 Filesystem API lebih lanjut, lihat Menjelajahi Filesystem API.