Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Expérience HTML5 : Drag & Drop de dossiers

Le , par FirePrawn

0PARTAGES

7  0 
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 ?

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 ?

Une erreur dans cette actualité ? Signalez-le nous !

Avatar de Didlith
Candidat au Club https://www.developpez.com
Le 11/07/2012 à 9:58
Enfin une solution intéressante passant par un navigateur

Citation Envoyé par thelvin Voir le message
... J'ai du mal à imaginer, à part dropbox et les galeries, quel genre d'applis vont utiliser ça ...
Toutes les solutions de gestion documentaire / partage de document (et il y'en a beaucoup). Egalement les gestions de dossiers attachés sur les CRM/ERP par exemple. Les applications ne manquent pas
1  0 
Avatar de vivoli12
Membre régulier https://www.developpez.com
Le 11/07/2012 à 14:36
Oui, enfin là c'est le drag and drop d'un dossier complet (avec sous-dossiers) et pas seulement d'un fichier (ça existe depuis longtemps sur les navigateurs html5).
1  0 
Avatar de tenpigs
Membre habitué https://www.developpez.com
Le 12/07/2012 à 12:26
Citation Envoyé par thelvin Voir le message
Seulement ce qui se trouve dans un dossier que tu lui aurais fourni en drag & drop. Ce qui est quand même assez sérieux, je trouve, mais bon... Les sites webs deviennent de plus en plus des applications normales, et une application normale n'a pas besoin de ton autorisation pour faire ce qu'elle veut de tes fichiers.
Une appli normale tu es censé avoir valider son installation alors qu'une page web, il n'est pas forcément évident de savoir ou tu arrives lorsque tu clic sur un lien dans google...
je crois que je vais arrêter d'utiliser Chrome...
1  0 
Avatar de thelvin
Modérateur https://www.developpez.com
Le 10/07/2012 à 16:34
Hum. Pourquoi pas. Ça aurait pas mal servi à DropBox.

D'habitude je préfère le copy/paste au drag & drop. Surtout sur les systèmes qui gardent un historique des copy récents et évitent de retourner les chercher à chaque fois.

D'un autre côté, fournir un dossier par paste, c'est dangereux. Avec un drag & drop on sait ce qu'on est en train de déplacer, puisqu'on vient de le prendre et on va bientôt le lâcher. Avec un paste, on risque de se tromper et d'oublier qu'on avait copy un dossier qui contient toutes nos coordonnées bancaires.

J'ai du mal à imaginer, à part dropbox et les galeries, quel genre d'applis vont utiliser ça.
0  0 
Avatar de thelvin
Modérateur https://www.developpez.com
Le 11/07/2012 à 14:40
Citation Envoyé par crf 70 Voir le message
ça pourrait servir à Wikipedia par exemple, ou même developpez : tu rédiges ta news sur un blocnote ou word, tu le déplaces dans la zone indiquée et tu n'as plus qu'à cliquer sur ok.
Tu parles de ce qu'il est déjà possible de faire depuis des années ?
Je ne sais pas si Wikipédia ou developpez.net ont jugé utile ou non de s'en servir, mais moi, je le fais depuis un moment.
0  0 
Avatar de ijk-ref
Membre confirmé https://www.developpez.com
Le 11/07/2012 à 19:10
Ok... mais ça sert toujours à rien et n'apporte aucune nouveauté s'il n'est toujours pas possible... par exemple... de réduire la taille des images efficacement et avant le transfère :-/
0  0 
Avatar de thelvin
Modérateur https://www.developpez.com
Le 12/07/2012 à 0:18
Citation Envoyé par ijk-ref Voir le message
Ok... mais ça sert toujours à rien et n'apporte aucune nouveauté s'il n'est toujours pas possible... par exemple... de réduire la taille des images efficacement et avant le transfère :-/
- C'est vrai que bon, à part réduire la taille des images avant l'upload, on en a un peu rien à foutre des nouveautés web.
- Redimensionner les images est en principe déjà possible avec l'accès en lecture des input file, canvas et son toDataUrl() ou toBlob(), XMLHttpRequest, et beaucoup de courage et de connaissances. Certes quelques tutoriels sur la manière d'utiliser chacun, ne seraient pas du luxe.
0  0 
Avatar de tenpigs
Membre habitué https://www.developpez.com
Le 12/07/2012 à 9:36
J'ai raté quelque chose ou cela signifie que n'importe quel site peut lister le contenu de mon disque dur tranquillement et s'uploader des fichiers?
0  0 
Avatar de thelvin
Modérateur https://www.developpez.com
Le 12/07/2012 à 13:38
Citation Envoyé par tenpigs Voir le message
Une appli normale tu es censé avoir valider son installation alors qu'une page web, il n'est pas forcément évident de savoir ou tu arrives lorsque tu clic sur un lien dans google...
De une, tu expliqueras ça à la plupart des gens.
De deux, il faut quand même pas être bien dans sa tête pour faire un drag & drop d'un dossier au hasard sur un site au hasard.

Mais, le temps passant, la sécurité se relâche, c'est vrai. À mon sens, ce genre de choses devraient passer par une autorisation forte avant de marcher. Mais bon, la sécurité pose ses problèmes.
0  0 
Avatar de ijk-ref
Membre confirmé https://www.developpez.com
Le 12/07/2012 à 15:41
Citation Envoyé par thelvin Voir le message
- C'est vrai que bon, à part réduire la taille des images avant l'upload, on en a un peu rien à foutre des nouveautés web.
- Redimensionner les images est en principe déjà possible avec l'accès en lecture des input file, canvas et son toDataUrl() ou toBlob(), XMLHttpRequest, et beaucoup de courage et de connaissances. Certes quelques tutoriels sur la manière d'utiliser chacun, ne seraient pas du luxe.
Donc c'est bien ce que je dis : toujours pas grand chose de nouveau et surtout pas efficace.

Si c'est pour écrire un décodeur/encodeur Jpeg en javascript non merci
0  0