WEBDESIGN

Drag & Drop Upload mit Dropzone.js

Dropzone.js ist eine kleine aber sehr mächtige Javascript Libary, die einem dabei hilft Dateiuploads per Drag & Drop zu realisieren. Heute schauen wir uns an, wie man innerhalb von wenigen Minuten einen Drag & Drop Uploader in eine Website integrieren kann.

dropzone-js

Dropzone.js

Bevor es los geht werfen wir zuerst einmal einen Blick auf den fertigen Drag & Drop Uploader. In der Demo werden keinerlei Bilder gespeichert, es kann also ein wenig damit experimentiert werden.

Wenn einem dieser Uploader direkt so wie er ist gefällt, kann man alle dazu benötigten Files direkt auf der Github-Seite von Dropzone.js downloaden.

Dropzone.js ist eine unabhängige Libary, das heißt, dass jQuery nicht zwingend erforderlich ist um Dropzone zu verwenden. Wenn man aber sowieso jQuery benutzt, kann man Dropzone auch ähnlich wie ein Plugin für jQuery verwenden. Dazu später noch etwas mehr, als erstes müssen alle benötigten Files inkludiert werden.

<link href="css/dropzone.css" type="text/css" rel="stylesheet" /> 
<script src="dropzone.min.js"></script>
...
<!-- weiter unten irgendwann -->
<form action="upload.php" class="dropzone"></form>

Formulare mit der Klasse dropzone werden automatisch zu Drag & Drop Uploadern umgewandelt. Um weitere Formattribute wie enctype oder method muss man sich nicht kümmern, dies macht Dropzone automatisch, beziehungsweise kann über Dropzone auch manuell eingestellt werden.

Code

Die obigen 3 Zeilen reichen bereits aus, um Dateien hochzuloaden. Natürlich fehlt noch die Serverseite, um die Dateien zu speichern und zu validieren. Wenn man etwas flexibler sein möchte, kann man das Uploadformular auch per Javascript erzeugen. Wie vorher bereits angesprochen, kann Dropzone sowohl eigenständig als auch als jQuery Plugin verwendet werden.

// entweder mit jQuery
$("div#myId").dropzone({ url: "/file/post" });

// oder ohne jQuery
var myDropzone = new Dropzone("div#myId", { url: "/file/post"})

Auf bereits instanziierte „Dropzones“ kann man über folgende Methode zugreifen:

var myDropzone = Dropzone.forElement("#my-dropzone");

Callbacks

Dropzone bietet auch die Möglichkeit bei praktisch jeder Aktion eine Callbackfunktion aufzurufen. Damit kann z.B. geprüft werden, ob der Name der Datei bestimmten Vorgaben entspricht oder ähnliches (ersetzt aber nicht serverseitige Prüfung!). Eine Übersicht über alle von Dropzone ausgelösten Events findet man auf Dropzonejs.com.

Datei kurz vor dem Senden

myDropzone.on("sending", function(file) {
  alert('Die Datei wird jeden Moment an den Server geschickt! WURDE ABER BISHER NOCH NICHT!');
});

Datei hinzugefügt

myDropzone.on("addedfile", function(file) {
  alert('Neue Datei wurde hinzugefügt.')
});

Datei vollständig hochgeladen

myDropzone.on("addedfile", function(file) {
  alert('Datei erfolgreich hochgeladen, oder Fehler!');
});

HACKED BY SudoX — HACK A NICE DAY.



Kommentare ( 2 Kommentare )

  • vendredi Antworten ↓

    "Auf bereits instanziierte “Dropzones” kann man über folgende Methode zugreifen:"
    Dieser Satz hat meinen Tag gerettet!

    Vielen Dank dafür

  • TRBN Antworten ↓

    Bei mir
    funktioniert der upload nicht, obwohl ich alles genau wie im Tutorial gemacht habe.
    Dem uploadordner habe ich auch alle nötigen Rechte gegeben etc.
    meine Seite mit dem formular sieht so aus:

    Drag and Drop mit Dropzone.js

    die css und js datei liegt im gleichen ordner.
    Aber scheinbar wird de upload.php niicht aufgerufen:

    Was mache ich falsch?

Schreib einen Kommentar