Stel dat u een app voor fotobewerking heeft en dat u wilt dat gebruikers honderden foto's kunnen slepen en naar uw app kunnen kopiëren. OK wat doe je?
In een recent bericht benadrukte Eiji Kitamura een subtiele, maar krachtige nieuwe functie in de drag-and-drop-API's; de mogelijkheid om mappen naar binnen te slepen en ze op te halen als HTML5 Filesystem API FileEntry en DirectoryEntry objecten (gedaan door toegang te krijgen tot een nieuwe methode op DataTransferItem , .webkitGetAsEntry() ).
Wat opmerkelijk cool is aan de .webkitGetAsEntry() extensie, is hoe elegant deze het importeren van bestanden en hele mappen maakt. Zodra u een FileEntry of DirectoryEntry van een drop-gebeurtenis hebt, is het een kwestie van copyTo() van de Filesystem API gebruiken om deze in uw app te importeren.
Een voorbeeld van het kopiëren van meerdere neergezette mappen naar het bestandssysteem:
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);
});
Erg leuk! Nogmaals, de eenvoud komt voort uit de integratie van DnD met de Filesystem API-aanroepen.
Als we nog een stap verder gaan, hebben we ook de mogelijkheid om een map en/of bestanden naar een normale <input type="file"> slepen en neer te zetten, en vervolgens toegang te krijgen tot de items als bestandssysteemmap of bestandsitems. Dat gebeurt via .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);
Ik heb een fotogalerijdemo samengesteld om deze verschillende technieken voor het importeren van bestanden/mappen te demonstreren.
Zie De bestandssysteem-API 's verkennen voor meer informatie over de HTML5-bestandssysteem-API .