Integrar input[type=file] à API Filesystem

Digamos que você tenha um app de edição de fotos e queira que os usuários possam arrastar centenas de fotos e copiá-las para o app. Ok, o que você faz?

Em uma postagem recente, Eiji Kitamura destacou um novo recurso sutil, mas poderoso, nas APIs de arrastar e soltar: a capacidade de arrastar pastas e recuperá-las como objetos FileEntry e DirectoryEntry da API Filesystem do HTML5 (acessando um novo método no DataTransferItem, .webkitGetAsEntry()).

O que é muito legal na extensão .webkitGetAsEntry() é como ela facilita a importação de arquivos e pastas inteiras. Depois de ter um FileEntry ou DirectoryEntry de um evento de soltar, basta usar o copyTo() da API do Filesystem para importá-lo no app.

Exemplo de cópia de várias pastas descartadas para o sistema de arquivos:

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

Muito bom! Novamente, a simplicidade vem da integração do DnD com as chamadas da API do Filesystem.

Além disso, também é possível arrastar e soltar uma pasta e/ou arquivos em um <input type="file"> normal e, em seguida, acessar as entradas como diretório do sistema de arquivos ou entradas de arquivo. Isso é feito com .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);

Fiz uma demonstração de galeria de fotos para mostrar essas diferentes técnicas de importação de arquivos/pastas.

Demonstração de lançamento

Para saber mais sobre a API Filesystem do HTML5, consulte Como usar as APIs Filesystem.