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

via t3n News http://t3n.de/news/dropzonejs-dragdrop-datei-443689/?utm_source=feedburner+t3n+News+12.000er&utm_medium=feed&utm_campaign=Feed%3A+aktuell%2Ffeeds%2Frss+%28t3n+News%29

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s