Comment créer un téléchargement de fichiers avec Dropzone.js
Créer une interface moderne de téléchargement de fichiers ne devrait pas nécessiter de se débattre avec des configurations complexes ou des frameworks lourds. Si vous avez besoin d’une fonctionnalité de glisser-déposer avec un retour visuel de progression qui fonctionne de manière transparente sur tous les navigateurs, Dropzone.js offre une solution légère, sans dépendances, qui s’implémente en quelques minutes.
Ce guide vous montre comment créer une interface professionnelle de téléchargement de fichiers en utilisant Dropzone.js, avec des capacités de glisser-déposer, des barres de progression et une validation de fichiers—le tout avec du JavaScript pur et sans complexité backend.
Points clés à retenir
- Dropzone.js fournit des téléchargements de fichiers par glisser-déposer sans aucune dépendance
- Les barres de progression automatiques et les aperçus de fichiers fonctionnent immédiatement
- Les options de configuration prennent en charge les restrictions de types de fichiers, les limites de taille et la validation personnalisée
- Compatible avec n’importe quelle technologie backend via des requêtes multipart/form-data standard
Débuter avec Dropzone.js
Tout d’abord, incluez Dropzone.js depuis un CDN. Aucun gestionnaire de paquets ni outil de build requis :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropzone File Upload</title>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.css">
</head>
<body>
<script src="https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.js"></script>
</body>
</html>Créer votre formulaire de téléchargement
L’approche la plus simple utilise un élément form avec la classe dropzone. Dropzone le transforme automatiquement en un formulaire de téléchargement interactif :
<form action="/upload" class="dropzone" id="my-dropzone">
<div class="dz-message">
Drop files here or click to upload
</div>
</form>C’est tout. Les utilisateurs peuvent maintenant glisser-déposer des fichiers ou cliquer pour parcourir. Le point de terminaison /upload reçoit les fichiers, que vous utilisiez PHP, Node.js, Python ou toute autre technologie backend.
Configurer les types de fichiers et les limites de taille
La plupart des applications nécessitent des restrictions de téléchargement. Configurez Dropzone pour accepter des types de fichiers spécifiques et imposer des limites de taille :
Dropzone.options.myDropzone = {
acceptedFiles: 'image/*,application/pdf,.doc,.docx',
maxFilesize: 5, // MB
maxFiles: 10,
addRemoveLinks: true,
dictDefaultMessage: 'Drop files here or click to upload (Max 5MB)'
};Cette configuration accepte les images, les PDF et les documents Word jusqu’à 5 Mo chacun, avec un maximum de 10 fichiers par session.
Discover how at OpenReplay.com.
Ajouter un retour visuel avec des barres de progression
Les barres de progression apparaissent automatiquement pendant les téléchargements, mais vous pouvez personnaliser leur comportement en utilisant des écouteurs d’événements :
Dropzone.options.myDropzone = {
init: function() {
this.on("uploadprogress", function(file, progress) {
console.log("File progress", progress);
});
this.on("success", function(file, response) {
console.log("Upload successful!");
});
this.on("error", function(file, errorMessage) {
console.log("Upload failed:", errorMessage);
});
}
};Personnalisation avancée du frontend
Pour plus de contrôle sur l’expérience de téléchargement, créez une dropzone personnalisée par programmation :
// Disable auto-discovery for all forms
Dropzone.autoDiscover = false;
// Create custom dropzone
const myDropzone = new Dropzone("#upload-area", {
url: "/upload",
thumbnailWidth: 120,
thumbnailHeight: 120,
parallelUploads: 2,
previewTemplate: document.getElementById('preview-template').innerHTML,
autoQueue: false,
previewsContainer: "#previews",
clickable: ".fileinput-button"
});
// Manual upload trigger
document.getElementById("submit-all").addEventListener("click", function() {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
});Validation de fichiers et retour utilisateur
Implémentez une validation côté client pour un retour immédiat à l’utilisateur :
Dropzone.options.myDropzone = {
accept: function(file, done) {
if (file.size === 0) {
done("Empty files are not allowed");
} else if (file.name.length > 100) {
done("Filename too long");
} else {
done(); // Accept file
}
},
init: function() {
this.on("addedfile", function(file) {
// File added to queue
if (this.files.length > this.options.maxFiles) {
this.removeFile(file);
alert("Maximum files exceeded");
}
});
}
};Intégration avec n’importe quel backend
Dropzone.js envoie les fichiers sous forme de requêtes POST multipart/form-data standard, ce qui le rend compatible avec n’importe quelle technologie serveur. Le nom de paramètre par défaut est file, mais vous pouvez le personnaliser :
Dropzone.options.myDropzone = {
paramName: "upload", // Changes field name from 'file' to 'upload'
headers: {
"X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
}
};Que votre backend utilise PHP, Node.js, Django ou Rails, il reçoit des requêtes de téléchargement de fichiers standard que le code serveur existant peut gérer sans modification.
Conclusion
Dropzone.js transforme les champs de saisie de fichiers basiques en interfaces de téléchargement professionnelles avec un minimum de code. Sa fonctionnalité de glisser-déposer, ses barres de progression automatiques et ses nombreuses options de personnalisation en font un choix idéal pour les applications frontend modernes qui privilégient l’expérience utilisateur sans ajouter de dépendances de framework.
La taille de 13 Ko gzippée de la bibliothèque et l’absence de dépendances signifient que vous pouvez ajouter des capacités sophistiquées de téléchargement de fichiers sans alourdir votre bundle JavaScript ni compliquer votre processus de build.
FAQ
Oui, Dropzone.js prend en charge plusieurs téléchargements de fichiers par défaut. Vous pouvez contrôler les téléchargements parallèles avec l'option parallelUploads et définir des limites maximales de fichiers en utilisant maxFiles. Les fichiers peuvent être téléchargés individuellement ou par lots selon votre configuration.
Les erreurs serveur sont gérées via l'écouteur d'événement error. Renvoyez des codes de statut HTTP comme 400 ou 500 depuis votre serveur avec des messages d'erreur dans le corps de la réponse. Dropzone affichera automatiquement ces erreurs et marquera le téléchargement du fichier comme échoué.
Oui, vous pouvez télécharger directement vers S3 en générant des URL présignées côté serveur et en configurant Dropzone pour les utiliser. Définissez l'option url dynamiquement pour chaque fichier et incluez les en-têtes nécessaires comme les jetons d'authentification dans l'option de configuration headers.
Dropzone génère automatiquement des vignettes pour les fichiers image. Pour les autres types de fichiers, vous pouvez personnaliser le modèle d'aperçu en utilisant l'option previewTemplate. Le paramètre autoQueue false permet aux utilisateurs de vérifier les fichiers avant de déclencher manuellement les téléchargements.
Understand every bug
Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
