Nous allons voir comment créer une zone de glisser/déposer pour uploader des documents en utilisant dropzone, une librairie jQuery. Nous n’allons parler que du côté client. Pour le côté serveur, que vous utilisiez PHP, Node.js, Ruby ou autre, la gestion du fichier uploadé reste la même que d’habitude.
Prérequis :
Pour comprendre ce tuto, vous devez au préalable connaître les bases du JavaScript et savoir utiliser jQuery.
Pas d’inquiétude, si vous ne maîtrisez pas jQuery, vous pouvez faire appel à un développeur jQuery freelance sur Codeur.com pour vous aider à mettre en place une zone de glisser/déposer sur votre site pour uploader des documents.
Sommaire :
Pour mettre en place dropzone, rien de plus simple : téléchargez-le depuis le github, ou utilisez un CDN.
Si vous utilisez la méthode du téléchargement, placez le contenu du dossier “src” dans votre projet, de préférence là où sont placés les autres fichiers javascript.
Dans la page HTML, insérez le script “dropzone.js” après celui de jQuery.
Dans le cas du CDN, vous avez juste à insérer le script après jQuery.
Pour les deux cas, la bonne méthode reste d’ajouter les scripts à la fin de votre html, avant la fermeture de la balise body.
<body>
<!-- Utilisation avec des fichiers -->
<script type=”text/javascript” src=”/public/plugins/jquery/jquery.min.js”></script>
<script type=”text/javascript” src=”/public/plugins/dropzone/dropzone.js”></script>
<!-- OU -->
<!-- Utilisation des cdn -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js”></script>
</body>
Il existe trois méthodes pour faire fonctionner le CSS :
<head>,sass avec le fichier “dropzone.scss” fourni dans le dossier téléchargé.<head>.
<head>
<!-- Utilisation avec des fichiers -->
<link rel=”stylesheet” type=”text/css” href=”/public/plugins/dropzone/dropzone.css” />
<!-- OU -->
<!-- Utilisation des CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/basic.min.css"/>
</head>
Toute la première partie de la configuration de dropzone va se passer dans le HTML. Notamment pour faire fonctionner le glisser/déposer qui va permettre d’uploader des documents.
Dans le HTML, insérer le code suivant :
<form action="/file-upload" class="dropzone" id="dropzone-area" enctype="multipart/form-data"></form>
Oui, ça fonctionne déjà. Certes, la présentation est très rudimentaire, mais si vous testez, vous constaterez que vous pouvez déjà glisser/déposer vos documents. Sur le Codepen qui suit, la zone encadrée en rouge (le formulaire) est fonctionnelle.
Est-ce de la magie noire ? Non ! Souvenez-vous, nous avons installé un fichier “dropzone.js”. Il contient un code qui permet de détecter un formulaire ayant la classe “dropzone”, et le rendre systématiquement fonctionnel. Veillez donc à bien laisser cette classe sur le formulaire.
Le paramètre enctype="multipart/form-data" est important lui aussi. Il permettra d’envoyer correctement le fichier au serveur. Sans ça, vous risquez de peiner à le récupérer.
Quant à l’id, il est facultatif et personnalisable. Il va surtout servir pour les personnalisations avancées, que nous n’allons pas voir dans ce tutoriel.
Enfin, l’attribut action, il s’agit de l’url sur laquelle est envoyé le document dès que l’utilisateur l’a déposé dans la zone dédiée.
Maintenant, il suffit de faire un peu de mise en page pour rendre le formulaire plus propre et plus sympathique à utiliser.
Pour les configurations plus avancées, nous vous invitons à consulter la documentation de dropzone, ou bien à faire appel à un développeur jQuery freelance sur Codeur.com.