So erstellen Sie einen Datei-Upload mit Dropzone.js
Die Erstellung einer modernen Datei-Upload-Oberfläche sollte nicht bedeuten, sich mit komplexen Konfigurationen oder schwerfälligen Frameworks herumschlagen zu müssen. Wenn Sie Drag-and-Drop-Funktionalität mit visueller Fortschrittsanzeige benötigen, die browserübergreifend nahtlos funktioniert, bietet Dropzone.js eine leichtgewichtige, abhängigkeitsfreie Lösung, die sich in wenigen Minuten implementieren lässt.
Dieser Leitfaden zeigt Ihnen, wie Sie mit Dropzone.js eine professionelle Datei-Upload-Oberfläche erstellen – komplett mit Drag-and-Drop-Funktionalität, Fortschrittsbalken und Dateivalidierung – alles mit reinem JavaScript und ohne Backend-Komplexität.
Wichtigste Erkenntnisse
- Dropzone.js bietet Drag-and-Drop-Datei-Uploads ohne jegliche Abhängigkeiten
- Automatische Fortschrittsbalken und Dateivorschauen funktionieren sofort einsatzbereit
- Konfigurationsoptionen unterstützen Dateitypbeschränkungen, Größenlimits und benutzerdefinierte Validierung
- Kompatibel mit jeder Backend-Technologie durch standardmäßige multipart/form-data-Anfragen
Erste Schritte mit Dropzone.js
Binden Sie zunächst Dropzone.js über ein CDN ein. Keine Paketmanager oder Build-Tools erforderlich:
<!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>Erstellen Ihres Upload-Formulars
Der einfachste Ansatz verwendet ein Formularelement mit der Klasse dropzone. Dropzone wandelt es automatisch in ein interaktives Upload-Formular um:
<form action="/upload" class="dropzone" id="my-dropzone">
<div class="dz-message">
Drop files here or click to upload
</div>
</form>Das war’s. Benutzer können jetzt Dateien per Drag and Drop ablegen oder zum Durchsuchen klicken. Der /upload-Endpunkt empfängt die Dateien, unabhängig davon, ob Sie PHP, Node.js, Python oder eine andere Backend-Technologie verwenden.
Konfigurieren von Dateitypen und Größenlimits
Die meisten Anwendungen benötigen Upload-Beschränkungen. Konfigurieren Sie Dropzone so, dass bestimmte Dateitypen akzeptiert und Größenlimits durchgesetzt werden:
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)'
};Diese Konfiguration akzeptiert Bilder, PDFs und Word-Dokumente mit jeweils bis zu 5 MB, mit maximal 10 Dateien pro Sitzung.
Discover how at OpenReplay.com.
Hinzufügen von Fortschrittsbalken-Feedback
Fortschrittsbalken erscheinen automatisch während des Uploads, aber Sie können ihr Verhalten mithilfe von Event-Listenern anpassen:
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);
});
}
};Erweiterte Frontend-Anpassung
Für mehr Kontrolle über das Upload-Erlebnis erstellen Sie eine benutzerdefinierte Dropzone programmatisch:
// 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));
});Dateivalidierung und Benutzer-Feedback
Implementieren Sie clientseitige Validierung für sofortiges Benutzer-Feedback:
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");
}
});
}
};Integration mit jedem Backend
Dropzone.js sendet Dateien als standardmäßige multipart/form-data-POST-Anfragen, was es mit jeder Server-Technologie kompatibel macht. Der Standard-Parametername ist file, aber Sie können ihn anpassen:
Dropzone.options.myDropzone = {
paramName: "upload", // Changes field name from 'file' to 'upload'
headers: {
"X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').content
}
};Ob Ihr Backend mit PHP, Node.js, Django oder Rails läuft – es empfängt standardmäßige Datei-Upload-Anfragen, die vorhandener Server-Code ohne Änderungen verarbeiten kann.
Fazit
Dropzone.js verwandelt einfache Datei-Inputs mit minimalem Code in professionelle Upload-Oberflächen. Die Drag-and-Drop-Funktionalität, automatische Fortschrittsbalken und umfangreiche Anpassungsoptionen machen es ideal für moderne Frontend-Anwendungen, die Wert auf Benutzererfahrung legen, ohne Framework-Abhängigkeiten hinzuzufügen.
Die Größe der Bibliothek von 13 KB (gzipped) und null Abhängigkeiten bedeuten, dass Sie anspruchsvolle Datei-Upload-Funktionen hinzufügen können, ohne Ihr JavaScript-Bundle aufzublähen oder Ihren Build-Prozess zu verkomplizieren.
Häufig gestellte Fragen (FAQs)
Ja, Dropzone.js unterstützt standardmäßig mehrere Datei-Uploads. Sie können parallele Uploads mit der Option parallelUploads steuern und maximale Dateilimits mit maxFiles festlegen. Dateien können je nach Konfiguration einzeln oder in Stapeln hochgeladen werden.
Serverfehler werden über den error-Event-Listener behandelt. Geben Sie HTTP-Statuscodes wie 400 oder 500 von Ihrem Server mit Fehlermeldungen im Response-Body zurück. Dropzone zeigt diese Fehler automatisch an und markiert den Datei-Upload als fehlgeschlagen.
Ja, Sie können direkt zu S3 hochladen, indem Sie serverseitig presigned URLs generieren und Dropzone so konfigurieren, dass diese verwendet werden. Setzen Sie die url-Option dynamisch für jede Datei und fügen Sie notwendige Header wie Authentifizierungs-Token in der headers-Konfigurationsoption hinzu.
Dropzone generiert automatisch Thumbnails für Bilddateien. Für andere Dateitypen können Sie die Vorschau-Vorlage mit der Option previewTemplate anpassen. Die Einstellung autoQueue false ermöglicht es Benutzern, Dateien zu überprüfen, bevor sie den Upload manuell auslösen.
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.
