Upload Drag & Drop

Upload Ajax avec Drag & Drop

Nous allons voir comment mettre en place un upload interactif via un drag & drop qui affiche la progression de l’envoi au fur et à mesure que l’envoi avance. Nous utiliserons jQuery afin de simplifier les requêtes.

Nous développerons ici 3 grandes fonctionnalités que vous pourrez ensuite remanier comme bon vous semble:

  1. Le drag & drop dans une zone
  2. L’upload de fichier via Ajax
  3. Le suivi de la progression des uploads en temps réel

Pour le drag & drop, nous avons ce qu’on appelle une drop zone, une zone où seront lâchés les fichiers. Cette zone est généralement marquée par un contours en pointillés et qui s’illumine quand vous passez dessus avec un fichier. En réalité, vous pouvez mettre en place une telle zone mais permettre de lâcher votre fichier sur toute la page et dès lors qu’un fichier passe au dessus, votre drop zone s’illumine pour autoriser le lâcher.

Avant tout il faut vérifier que les fonctionnalités que l’ont souhaite sont disponibles sur le client

Ensuite si ces fonctionnalités sont disponible, on prend en charge la drop zone et on surveille les événements liés au drop.

L’élément .uploader est ici la drop zone réellement considérée pour le drop. La classe uploader-handled lui est ajoutée quand il est pris en charge comme drop zone, ce qui permet de masquer un éventuel bouton d’upload classique à ce moment. Il possède également la classe dragging-over quand il se fait survoler par un fichier valide.

J’ai ajouté un fix au dragleave qui est appelé à chaque fois que le fichier passe au dessus d’un élément enfant à la drop zone, ce qui le fait clignoter.

On envoie ensuite les fichiers et on suit la progression.

On communique ici avec une api REST qui répond en JSON. Pendant l’envoi, on calcule la progression en % et on affiche la vitesse après 3 secondes écoulées.
Pour l’exemple, j’ai ajouté quelques console.log mais je vous laisse les supprimer.

Implémentez les fonctions setFileState et setFileListState selon vos besoins, on ne voit ici que comment obtenir les informations, utilisez ensuite jQuery pour remplir vos éléments HTML avec.

Vous avez maintenant une application envoyant automatiquement les fichiers lâchés sur votre page et affichant la progression de l’upload.

Facebook Profile photo
Florent

Je suis un développeur web à mon compte et je m'intéresse à beaucoup de choses en informatique...

Aucun commentaire

Poster un commentaire