Expérience HTML5 : Drag & Drop de dossiers

Le 10 juillet 2012 à 11:07, par FirePrawn

0PARTAGES

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 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);&#8203;

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 ?