Aujourd'hui je vous propose de découvrir une librairie plutôt sympa pour gérer des champs d'envoi de plusieurs fichiers @grafikart/drop-files-element.
Pourquoi pas Dropzonejs ?
Lorsqu'il s'agit de créer un système de dépôt de fichiers en drag'n drop la librairie Dropzonejs est souvent plébiscitée. Le principal souci de cette librairie (et des autres librairies similaires) est qu'elle oblige à gérer le traitement des fichiers en Ajax ce qui demande souvent des adaptations côté serveur.
Cette approche est particulièrement problématique dans le cas d'une création de contenu où les images ne doivent pas être envoyées avant la persistance du contenu en base.
Ma solution
L'objectif de ma librairie est d'offrir une solution qui s'intègre bien avec les framework back-end et en nécessitant le minimum d'intervention pour s'intégrer à un code existant.
Pour gérer un envoie de fichier multiple on utilise un champ de type fichier avec l'attribut multiple.
<input multiple type="file" name="files[]"/>Un tel champ offre déjà les fonctionnalités désirées mais l'interface n'est pas évidente à saisir pour l'utilisateur. L'objectif est donc de garder la fonction tout en changeant la forme.
La première étape consiste à charger le script qui va enregistrer le "Custom Built in element". Cela peut se faire via un simple import
import '@grafikart/drop-files-element'ou via unpkg
<script type="module" src="//unpkg.com/@grafikart/drop-files-element"></script>Ensuite, il faut assigner le custom element au champ à l'aide de l'attribut is. Vous pouvez aussi ajouter des indications pour l'utilisateur à l'aide des attributs label et help.
<input
type="file"
multiple
name="files[]"
label="Déposez vos fichiers ou cliquez ici."
is="drop-files"
/>Et voilà ! le tour est joué. Pour plus d'informations n'hésitez pas à vous rendre sur la documentation.
