Mengintegrasikan input[type=file] dengan Filesystem API

Misalnya, Anda memiliki aplikasi pengeditan foto dan Anda ingin pengguna dapat menarik ratusan foto dan menyalinnya ke dalam aplikasi. Oke, apa yang Anda lakukan?

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

Hal yang sangat menarik dari ekstensi .webkitGetAsEntry() adalah betapa elegannya ekstensi ini dalam mengimpor file dan seluruh folder. Setelah Anda memiliki FileEntry atau DirectoryEntry dari peristiwa lepas, cukup gunakan copyTo() Filesystem API untuk mengimpornya ke aplikasi Anda.

Contoh penyalinan beberapa folder yang dilepas 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, kemudahan 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"> biasa, lalu mengakses entrinya sebagai direktori Filesystem atau entri file. Hal tersebut 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 menyusun demo galeri foto untuk mendemonstrasikan teknik berbeda ini dalam mengimpor file/folder.

Luncurkan Demo

Untuk mempelajari lebih lanjut tentang API Sistem File HTML5, lihat Menjelajahi API Sistem File.