Supponiamo che tu abbia un'app di fotoritocco e voglia che gli utenti siano in grado di trascinare in centinaia di foto e copiarle nella tua app. Ok, cosa fai?
In un post recente, Eiji Kitamura ha evidenziato una nuova funzionalità, discreta ma potente, nelle API di trascinamento: la possibilità di trascinare le cartelle e recuperarle come oggetti dell'API HTML5 Filesystem FileEntry e DirectoryEntry (tramite l'accesso a un nuovo metodo in DataTransferItem, .webkitGetAsEntry()).
L'aspetto davvero interessante dell'estensione .webkitGetAsEntry() è il modo in cui rende l'importazione di file e intere cartelle. Una volta ottenuto un FileEntry o un DirectoryEntry da un evento di rilascio, è necessario usare l'copyTo() dell'API Filesystem per importarlo nella tua app.
Esempio di copia di più cartelle rilasciate nel file system:
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);
});
Molto bene. Ancora una volta, la semplicità deriva dall'integrazione di DnD con le chiamate API Filesystem.
Facendo un ulteriore passo in avanti, possiamo anche trascinare una cartella e/o i file su un normale <input type="file">, quindi accedere alle voci come directory del file system o voci di file. tramite .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);
Ho preparato una demo di una galleria fotografica per dimostrare queste diverse tecniche di importazione di file/cartelle.
Per scoprire di più sull'API HTML5 Filesystem, consulta la sezione Esplorazione delle API filesystem.