Enter the Dropzone

Jeder kennt die Tortur sich über ein Dialogfenster zu einer Datei in einem gut gefüllten System durchzuklicken. Wenn man zum Beispiel eine Onlinebewerbung vorbereitet, dann hat man so gut wie immer eine Instanz des Dateiexplorers mit der Bewerbungsmappe in Dateiform offen. Für einen komfortablen Bewerbungsprozess wäre es somit praktisch, diese Datei direkt vom Dateiexplorer in den Browser zu schieben. In diesem Zusammenhang möchte ich Euch DropzoneJS vorstellen.


Wozu DropzoneJS?

Mit DropzoneJS ist es möglich, Container auf Webseiten einzubinden, welche per Drag & Drop (und auch per Dialog) Dateien aufnehmen. DropzoneJS ist eine von Matias Meno bereitgestellte Open Source Bibliothek und kann auf der Website http://www.dropzonejs.com/ heruntergeladen werden. In der folgenden Abbildung 1 ist eine Beispiel-Dropzone zu sehen.

Abbildung 1 – Beispiel einer Dropzone – Quelle: http://www.dropzonejs.com/

 

Ein praktisches Feature ist die integrierte Dateivorschau, die in Abbildung 2 zu sehen ist. Diese Vorschau kann man nach Belieben um weitere Komponenten, wie einen Fortschrittsbalken oder Schaltflächen zum Löschen, erweitern.

Abbildung 2 – Bildvorschau in der Beispiel Dropzone – Quelle: http://www.dropzonejs.com/

 

Um die Bibliothek zu verwenden sind nur wenige Schritte notwendig:

  • Einbinden der Bibliothek
  • Erstellung eines Formulars unter Verwendung der Klasse „dropzone“

Der Import von anderen Bibliotheken wie JQuery ist nicht erforderlich, da DropzoneJS alle benötigten Funktionalitäten bereits beinhaltet. Ebenso ist es nicht nötig, ein <input>-Tag vom Type „file“ und eine Submit-Methode/-Schaltfläche zu integrieren, welche normalerweise zum Anstoßen des Uploads nötig sind. Der eigentliche Upload ist serverseitig zu implementieren (PHP, JSP, etc.). Den bereits oben angesprochenen Container für die Drag & Drop Funktionalität generiert die Bibliothek automatisch. Die Darstellung ist, wie in HTML üblich, mit CSS zu gestalten. Ein besonderes Feature von DropzoneJS ist das asynchrone Behandeln von Formularanfragen mit AJAX. Erst kürzlich stand ich vor einem Problem, bei dem mir diese Funktion zugutekam.


Anwendungsfall JSP-Scriptlet

Für die Umsetzung einer Formularseite welche, sowohl Text als auch eine angehängte Datei per E-Mail versenden soll, war die Implementierung über ein Java-Server-Page Scriptlet durchzuführen. Aus verschiedenen Gründen entschied ich mich dazu, zwei Formulare zu bauen. Das erste Formular sollte in der Lage sein, verschiedene Eingaben über Textfelder, Checkboxen etc. und eine Datei in Form einer E-Mail abzusenden. Die Anforderung für das zweite Formular war die Umsetzung eines Datei-Uploads. Der Webserver interpretiert je nach abgesendetem Formular den entsprechenden JSP-Code. Um eine E-Mail erfolgreich zu versenden, muss zuerst der Upload und dann der Versandt erfolgen. Für die Implementierung des Uploadformulars bedeutete dies eine asynchrone Datenübertragung zwischen Browser und Webserver zu ermöglichen, da sonst bereits getätigte Eingaben im ersten Formular verschwinden. Die wohl einfachste Möglichkeit dies zu tun, wäre das Senden der Anfrage an ein unsichtbares IFrame gewesen. Da IFrames unter anderem auf Grund der Same-Origin-Policy zu Problemen führen können, verzichtete ich auf diesen Ansatz.

Es folgten die Integration der DropzoneJS-Bibliothek, sowie der Umbau des Formulars für den Datei-Upload (class=“Dropzone“). Diese zwei kleinen Änderungen genügten, um die Funktionalität für einen asynchronen Datei-Upload auf Basis des bestehenden JSP-Codes umzusetzen.

Code-Beispiel 1: Import und Code für DropzoneJS

 

Eine weitere nützliche Fähigkeit von DropzoneJS ist die Bereitstellung verschiedener EventHandler. So kann man in der Konfiguration Methoden an diese EventHandler hängen, welche beim Auslösen der Events ausgeführt werden. Ein tolles Beispiel dafür ist der EventHandler „uploadprogress“. Die Funktion, welche an diesem hängt, wird während des Upload-Prozesses fortlaufend ausgelöst, womit sich der Fortschritt auf verschiedene Weisen visualisieren lässt. Im folgenden Codeausschnitt wird in der Konfiguration einer Dropzone ein solcher EventHandler definiert. Die Ausgabe des Upload-Fortschrittes erfolgt als Prozentzahl in einem HTML Element.

Code-Beispiel 2: Textuelle Visualisierung des Upload-Fortschrittes in Prozent.


Fazit

Das Anwendungsbeispiel zeigt: DropzoneJS ist eine leicht zu integrierende und gut konfigurierbare Bibliothek, welche die Entwicklung eines Upload-Formulars sehr komfortabel macht. Besonders die Unabhängigkeit von anderen Technologien macht diese Bibliothek universell einsetzbar.


Quellen:

http://www.dropzonejs.com/

https://www.sitepoint.com/file-upload-form-express-dropzone-js/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.