Интеграция input[type=file] с API файловой системы

Eric Bidelman

Допустим, у вас есть приложение для редактирования фотографий, и вы хотите, чтобы пользователи могли перетаскивать сотни фотографий и копировать их в ваше приложение. Хорошо, что ты делаешь?

Запустить демо

В недавнем сообщении Эйдзи Китамура выделил тонкую, но мощную новую функцию в API перетаскивания; возможность перетаскивать папки и извлекать их как объекты FileEntry и DirectoryEntry API файловой системы HTML5 (выполняется путем доступа к новому методу DataTransferItem , .webkitGetAsEntry() ).

Что удивительно в расширении .webkitGetAsEntry() так это то, насколько элегантно оно позволяет импортировать файлы и целые папки. Если у вас есть FileEntry или DirectoryEntry из события drop, вам нужно использовать copyTo() API файловой системы, чтобы импортировать его в ваше приложение.

Пример копирования нескольких удаленных папок в файловую систему:

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

Очень хорошо! Опять же, простота достигается за счет интеграции DnD с вызовами 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);

Я собрал демо-галерею фотографий, чтобы продемонстрировать различные методы импорта файлов и папок.

Запустить демо

Дополнительные сведения об API файловой системы HTML5 см. в разделе Изучение API файловой системы .