Dropzone.js: Drag&Drop Datei Upload mit Bildvorschau
• Lesezeit: 1 Min. Gerade keine Zeit? Jetzt speichern und später lesen
Dropzone.js vor dem Upload
Dropzone.js ist eine Open Source Bibliothek, die das Erstellen eines Drag&Drop Datei-Uploads mit Bildvorschau ermöglicht. Alles was ihr benötigt, ist eine aktuelle Fassung von jQuery und die dropzone.js Datei.
Das Skript verwandelt in der Standardeinstellung Formular-Elemente mit der „dropzone“-Klasse oder kann alternativ via jQuery-Aufruf einem beliebigen Element im Dokument zugewiesen werden. Serverseitig können die Daten von Dropzone.js wie bei einem normalen Datei-Uploader via Formular verarbeitet werden.
Dropzone.js während des Uploads
Dropzone.js einsetzen
Der einfachste Weg um Dropzone zu benutzen, ist ein Formular mit der Dropzone-Klasse zu versehen.
<form action="/file-upload"></form>Alles andere wird im Anschluss vom Skript selbst erledigt. Die Uploads werden an das im „action“-Attribut definierte Skript übertragen. Serverseitig kann der Upload so verarbeitet werden, als ob es von einem normalen HTML-Formular-Dateifeld stammen würde.
Dropzone.js kann auch direkt mit jQuery oder durch Instanziierung der Dropzone-Klasse erzeugt werden. So kann jedes Element in euerem Projekt zur Dropzone werden.
// jQuery
$("div#myId").dropzone({ url: "/file/post" });
// Dropzone class:
var myDropzone = new Dropzone($("div#myId"), { url: "/file/post"});
Dropzone.js konfigurieren
Zur Konfiguration von Dropzone.js stehen zwei verschiedene Möglichkeiten zur Verfügung. Beim Aufruf via JavaScript können sämtliche Parameter beim Aufruf selbst übergeben werden. Greift ihr auf die einfache HTML-Implementierung zurück, müssen die Einstellungen in einer externen Konfigurationsdatei (Dropzone.options) vorgenommen werden.
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
accept: (file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
}
else { done(); }
}
};
Dropzone lässt vielfältige Einstlelungsmöglichkeiten zu. Neben der Ziel-URL können die maximale Anzahl von parallel ausgeführten Uploads, die maximale Dateigröße, Funktionen zur Überprüfung von Dateiformaten und Namen sowie fallback-Funktionen für nicht unterstützte Browser definiert werden. Außerdem unterstützt Dropzone verschiedene Events, für die Callbacks festgelegt werden können.
// Already instantiated dropzones are accessible through `.data("dropzone")`
var myDropzone = $("#my-dropzone").data("dropzone");
myDropzone.on("addedfile", function(file) {
/* Maybe display some more file information on your page */
});
Derzeit unterstützt Dropzone alle Modernen Browser. Darunter Chrome ab Version 7, Firefox ab Version 4, Internet Explorer ab Version 10, Opera ab Version 12 (außer MacOS) und Safari ab Version 5. Für alle anderen Browser liefert Dropzone eine automatische Fallback-Funktion.
Erste Experimente mit Dropzone könnt ihr auf der offiziellen Seite von Dropzone.js starten. Die Downloadversion findet ihr im Github-Repository von Dropzone.js.
Bitte beachte unsere Community-Richtlinien
Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.
Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.
Dein t3n-Team
Sieht cool aus. Versuch ich mal einzusetzen wenn ich ein passendes Projekt habe. Danke für den Artikel :)
Im Abschnitt dropzone.js konfigurieren gibt es einen Syntaxfehler. Es fehlt der Funktionsaufruf vor der Klammer mit den parametern. In Zeile 5 muss es heissen:
accept: function(file, done) {
Schöne Grüße aus Köln