input[type=file] と Filesystem API の統合

写真編集アプリで、ユーザーが何百枚もの写真をドラッグしてアプリにコピーできるようにしたいとします。どうすればよいですか？

最近の投稿で、Eiji Kitamura は、ドラッグ＆ドロップ API の繊細でありながら強力な新機能である、フォルダをドラッグして HTML5 Filesystem API の FileEntry オブジェクトと DirectoryEntry オブジェクトとして取得する機能（DataTransferItem の新しいメソッド .webkitGetAsEntry() にアクセスすることで実行）について説明しています。

.webkitGetAsEntry() 拡張機能の優れた点は、ファイルやフォルダ全体をエレガントにインポートできることです。ドロップ イベントから FileEntry または DirectoryEntry を取得したら、あとは Filesystem API の copyTo() を使用してアプリにインポートするだけです。

複数のドロップされたフォルダをファイル システムにコピーする例:

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

ありがとうございます。シンプルさは、ドラッグ＆ドロップと Filesystem API 呼び出しを統合したことによるものです。

さらに、フォルダやファイルを通常の <input type="file"> にドラッグ＆ドロップして、エントリにファイル システム ディレクトリまたはファイル エントリとしてアクセスすることもできます。これは .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);

ファイルやフォルダをインポートするさまざまな方法を示すために、写真ギャラリーのデモを作成しました。

デモを開始する

HTML5 Filesystem API の詳細については、Filesystem API の概要をご覧ください。