Drücke die Tasten ◄ ► für weitere 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.

63 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
4 Antworten
  1. von lang: Javascript | Annotary am 20.02.2013 (18:20Uhr)

    [...] from Patrick Kohan: webapp android app general programming misc Sort Share t3n.de       4 minutes [...]

  2. von cephei am 21.02.2013 (04:00Uhr)

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

  3. von Fünf HTML5-Uploader für Deine Webseite… am 07.05.2013 (09:25Uhr)

    [...] Dropzone.js: Drag&Drop Uploader mit Bildvorschau – t3n Artikel [...]

  4. von megadive am 24.05.2013 (15:19Uhr)

    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

Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema
Fünf HTML5-Uploader für Deine Webseite
Fünf HTML5-Uploader für Deine Webseite

Webentwickler haben verschiedenste Möglichkeiten, um Datei-Uploads zu realisieren. Das alte File-Input-Feld hat ausgedient. HTML5 stellt APIs zur Verfügung, mit denen eine tiefgehender Zugriff auf.. ... » weiterlesen

Tolles Software-Bundle mit Parallels, 1Password, Fantastical und mehr zum Schnäppchenpreis
Tolles Software-Bundle mit Parallels, 1Password, Fantastical und mehr zum Schnäppchenpreis

Parallels bietet derzeit ein Software-Bundle für den Mac zu einem attraktiven Preis. Neben dem Parallels Desktop 9, mit dem man Windows auf dem Mac betreiben kann, beinhaltet die Software-Sammlung... » weiterlesen

8 geniale Mockup-Tools, um deine App in Szene zu setzen
8 geniale Mockup-Tools, um deine App in Szene zu setzen

Ein richtig gutes App-Design ist für Startups, Coder und Designer viel wert – es mit schicken Produkt-Screenshots überzeugend in Szene zu setzen, aber noch viel mehr. Wir stellen die acht besten.. ... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen