Vorheriger Artikel Nächster Artikel

Dropzone.js: Drag&Drop Datei Upload mit Bildvorschau

Mit Dropzone.js können Webworker einen Drag&Drop-Uploader mit Vorschaubildern erzeugen. Wir zeigen euch, was das Skript kann, wie es funktioniert, wofür es sich einsetzen lässt und wie ihr es konfiguriert.

Dropzone.js: Drag&Drop Datei Upload mit Bildvorschau
Dropzone.js Screenshot (Vor Upload)
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 Screenshot
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.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
2 Antworten
  1. von cephei am 21.02.2013 (04:00 Uhr)

    Sieht cool aus. Versuch ich mal einzusetzen wenn ich ein passendes Projekt habe. Danke für den Artikel :)

    Antworten Teilen
  2. von megadive am 24.05.2013 (15:19 Uhr)

    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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema
„Waltr“ statt iTunes – Jedes Audio- und Videoformat per Drag & Drop auf deinem iPhone
„Waltr“ statt iTunes – Jedes Audio- und Videoformat per Drag & Drop auf deinem iPhone

Apple unterstützt auf iPhones und iPads nur eine handvoll Audio- und Video-Formate. Nutzer müssen Musik und Filme demnach ins richtige Format konvertieren, ehe sie diese übertragen. » weiterlesen

THAW: Datei-Austausch per Drag & Drop zwischen Smartphone und Computer
THAW: Datei-Austausch per Drag & Drop zwischen Smartphone und Computer

Forscher am MIT haben mit THAW eine Lösung präsentiert, die eine direkte Interaktion zwischen Smartphone und Computer ermöglicht. Damit lassen sich etwa Dateien per Drag & Drop vom Computer … » weiterlesen

Newsletter per Drag & Drop: StampReady macht Kampagnen ganz einfach [Screencast]
Newsletter per Drag & Drop: StampReady macht Kampagnen ganz einfach [Screencast]

Das Newslettererstellen kann aufwendig und mit viel Code verbunden sein. StampReady hat sich zum Ziel gesetzt, Newsletter-Kampagnen ganz einfach zu machen. Wir haben uns das Tool angeschaut. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen