DropZoneJS – Drag n Drop FileUpload

Heute wollen wir für alle Webentwickler mal ein kleines aber doch recht cooles Tool vorstellen: DropZoneJS – FileUpload via Drag n Drop. DropzoneJS ist ein schlanker aber einfach zu integrierender Drag n Drop Uploader für Files. Das Tool bietet sogar Vorschaubilder beim Upload – Richtig Cool.

Eine Demo wie DropZoneJS funktioniert seht Ihr am schnellsten auf deren Webseite dropzonejs.com.

Aber auch die Integration ist sehr simpel. Mit folgenden beiden Links im Head-Bereich unserer Seite wird DropZoneJS integriert:

<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">

Anschliessend kann DropzoneJS in ein Formular integriert werden. Ein Beispiel haben wir euch mal aufgezeigt:

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

Wichtig dabei ist, das die Klasse dropzone heisst. Ist das .js File korrekt eingebunden, erscheint in unserem Formular ein Bereich in welchen wir unsere Files hineinziehen können und diese werden dann an file-upload zur weiteren Verarbeitung weitergereicht.

Grundsätzlich wars das auch schon. Natürlich könnt Ihr DropzoneJS voll und ganz auf Eure Bedürfnisse anpassen, sei dies um mehrere Files parallel hochzuladen oder einfach mittels CSS noch etwas umgestalten. Alle möglichen Konfigurationsmöglichkeiten könnt Ihr aus folgender URL auslesen: dropzonejs.com/#configuration-options.

Schauts Euch mal an und viel Spass mit dem DropZoneJS – Drag n Drop FileUpload.