Durée : 15 min.

Je vous propose de voir ensemble comment créer une interface permettant à vos utilisateurs de déposer des fichiers dans votre application via glisser-déposer (Drag’n drop), et sans utiliser de bibliothèques externes ! 🙂

Le commencement : HTML 5

Comme je vous le disais, nous n’allons pas utiliser une librairie pour développer notre DropZone, nous allons simplement utiliser les événements déjà fournis par HTML5 : drop, dragstart, dragover, etc…

L’événement qui nous intéresse en particulier est drop. Mais comment utiliser les événements HTML dans une application Angular2 ? Et bien, vous avez déjà surement dû le faire avec l’événement click :

<div (click)=“myFunction(event)”></div>

Ce n’est pas plus compliqué avec l’événement drop :

<div (click)="“myFunction(event)”></div>

Il ne nous reste donc plus qu’à ajouter un petit bout de code Html pour pouvoir démarrer ce tutoriel avec une bonne base :

<div id="dropzone"
(dragover)="false"
(dragend)="false"
(drop)="handleDrop($event)">
<p style="margin: 10px; text-align: center"> <strong>Drop Your Images Here</strong></p>
</div>

Ici rien de compliqué, on associe l’événement drop à une méthode handleDrop, que nous allons implémenter plus tard, et on a ajouté un peu de style pour ajouter un texte au centre de notre DropZone pour informer l’utilisateur qu’il peut dropper des fichiers à cet endroit s’il le souhaite.

Je ne sais pas vous mais je rajouterez bien une petite touche de style, histoire d’obtenir une DropZone digne de ce nom, avec des pointillés vous savez ?

@Component({
  selector: '...',
  templateUrl: '...',
  styles: [`
    #dropzone {
      background-color: white;
      height: 300px;
      border: 5px dotted #ccc;
    }

    #dropzone:hover {
      border-color: #bbdefb;
    }
  `]
})

Le vif du sujet : Un composant pour récupérer les fichiers

Bon, je ne vous cache pas qu’il nous reste le plus gros du travail, récupérer et traiter les fichiers déposer dans la dropzone. Pour cela, nous allons implémenter notre fonction handleDrop(event).

handleDrop(e) {
  e.preventDefault(); <span spellcheck="true">// évite d'ouvrir le fichier recherché</span>
  var files:File = e.dataTransfer.files;

  Object.keys(files).forEach((key) => {
    let file: File = files[key];
    console.log(file);
  });
}

Le code ci-dessus s’occupe de récupérer tous les fichiers déposer dans la DropZone, et d’afficher les informations de ces fichiers dans la console.

L’objet DataTransfer contient les données glissées au cours d’une opération de glisser-déposer. Cet objet peut être récupéré depuis tous les événements de glisser. Ensuite il ne vous reste plus qu’à récupérer les fichiers avec la propriété files, qui renvoie un objet FileList, que vous n’avez plus qu’à parcourir. Facile, non ? ; )

tumblr_n3pxkg0tfU1s609pno2_500

A partir de là, vous pouvez faire ce que vous voulez de vos objets Files; les déposer sur un serveur distant, permettre à l’utilisateur de les modifier dans votre application (redimensionner une image?), bref, à partir de maintenant c’est à vous de jouer ! J’ai rédiger un autre billet sur l’upload de fichiers avec Angular2, je vous invite à rechercher le billet “Uploader un fichier avec Angular2” pour ceux que ça intéresse. : )

Conclusion

J’espère que ce tutoriel vous aideras à implémenter votre propre DropZone. Il ne s’agit que d’un point de départ pour le moment. Voici une liste de plusieurs améliorations possibles :

  • Rajouter un bouton Upload au milieu de la DropZone pour apporter un peu de souplesse à l’utilisateur.
  • Rajouter une barre de chargement en écoutant l’objet XmlHttpRequest.
  • Proposer des animations User-friendly avec les événements dragstart, dragleave, etc…
  • Et peut-être autres choses si des idées me viennent à l’esprit.

PS : Je publie chaque semaine un nouveau billet sur Angular. Suivez la Page Facebook du blog pour être tenu au courant !