Imaginons que vous ayez une application de retouche photo et que vous souhaitiez que les utilisateurs puissent faire glisser des centaines de photos et les copier dans votre application. Que faites-vous ?
Dans un post récent, Eiji Kitamura a mis en avant une nouvelle fonctionnalité subtile, mais puissante, des API de glisser-déposer : la possibilité de faire glisser des dossiers et de les récupérer en tant qu'objets FileEntry et DirectoryEntry de l'API de système de fichiers HTML5 (en accédant à une nouvelle méthode sur DataTransferItem, .webkitGetAsEntry()).
L'extension .webkitGetAsEntry() est particulièrement intéressante, car elle permet d'importer des fichiers et des dossiers entiers de manière élégante. Une fois que vous disposez d'un FileEntry ou d'un DirectoryEntry à partir d'un événement de dépôt, il vous suffit d'utiliser le copyTo() de l'API Filesystem pour l'importer dans votre application.
Exemple de copie de plusieurs dossiers déposés dans le système de fichiers:
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);
});
Très bien ! Encore une fois, la simplicité vient de l'intégration de DnD aux appels d'API de système de fichiers.
Pour aller plus loin, vous pouvez également faire glisser un dossier et/ou des fichiers sur un <input type="file"> normal, puis accéder aux entrées en tant que répertoire de système de fichiers ou entrées de fichiers. Pour ce faire, utilisez .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);
J'ai créé une démonstration de galerie de photos pour illustrer ces différentes techniques d'importation de fichiers/dossiers.
Pour en savoir plus sur l'API de système de fichiers HTML5, consultez Explorer les API de système de fichiers.