Dropzone.js: Drag&Drop Datei Upload mit Bildvorschau

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 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.