Malgré une bonne compatibilité pour la fonction de Drag & Drop, le cas d'un dossier reste problématique.
En effet, lorsqu'un utilisateur veut mettre en ligne un dossier en le faisant glisser à l'endroit prévu, il s'attend à ce que le dossier et tout son contenu (sous-dossiers, fichiers) soient mis en ligne.
Or jusqu'à présent ce n'était pas possible.
L'API HTML5 pour le Drag & Drop ne gère pas les dossiers, et on se retrouve avec un fichier portant le nom du dossier d'une taille nulle.
Ce temps est révolu avec l'arrivée de Chrome 21 !
La dernière version de Chrome apporte en effet une solution pour le transfert d'un dossier via un Drag & Drop.
Dans cette version qui est encore en bêta, une nouvelle méthode fait son apparition sur les objets DataTransferItem qui permet de retourner le dossier que l'on a sélectionné comme une entrée système, et non plus un fichier.
En utilisant l'API file system cette entrée système peut être parcourue avec un simple code javascript :
| Code javascript : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | function traverseFileTree(item, path) { path = path || ""; if (item.isFile) { // Get file item.file(function(file) { console.log("File:", path + file.name); }); } else if (item.isDirectory) { // Get folder contents var dirReader = item.createReader(); dirReader.readEntries(function(entries) { for (var i=0; i<entries.length; i++) { traverseFileTree(entries[i], path + item.name + "/"); } }); } } dropArea.addEventListener("drop", function(event) { event.preventDefault(); var items = event.dataTransfer.items; for (var i=0; i<items.length; i++) { // webkitGetAsEntry is where the magic happens var item = items[i].webkitGetAsEntry(); if (item) { traverseFileTree(item); } } }, false);​ |
Ce code est disponible sur GitHub : folder_drag_and_drop.js
Pour plus d'informations sur cette nouvelle fonctionnalité, je vous invite à consulter le Wiki correspondant.
Source : Protonet
Et vous ?
Avez-vous déjà essayé de développer un explorateur de dossiers et fichiers se basant sur l'explorateur Windows ? Attendiez-vous cette évolution de l'API ? 
Envoyé par thelvin
