Expérience HTML5 : Drag & Drop de dossiers
Développez un système d'upload de fichiers et dossiers
similaire à l'explorateur Windows
Grâce aux nouvelles API apparues avec HTML5 il est d'ores et déjà possible de créer un système d'upload de fichiers et de dossiers reprenant le fonctionnement de l'explorateur Windows ou du Finder d'OS X.
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:
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 ?
:fleche: Avez-vous déjà essayé de développer un explorateur de dossiers et fichiers se basant sur l'explorateur Windows ?
:fleche: Attendiez-vous cette évolution de l'API ?
