Mithilfe von Dropzone.js könnt ihr ganz einfach einen schönen Fileupload in eure Seite integrieren. Das coole dabei - es funktioniert per Drag&Drop.
Dropzone.js ist eine 24KB kleine Javascript Bibliothek, die es Frontend Developern ermöglicht, einfach per Drag&Drop Dateien auf ihrere Server hoch zuladen. Dabei sind keine Grenzen gesetzt. Dropzone unterstützt alle gängigen Dateiformate, sind es Bilder zeigt Dropzone sogar eine kleine Vorschau des Bildes an.
Um Dropzone zu integrieren benötigt ihr nur die dropzone.js, die ihr von der Homepage runterladen könnt. Seit Version 2.0 wird jQuery nicht mehr vorrausgesetzt, ist es dennoch vorhanden initialisiert es sich automatisch als jQuery Plugin.
<script src="./path/to/dropzone.js"></script>
Hat man die Javascript Datei eingebunden steht Dropzone nun unter
window.dropzone
zur Verfügung. Falls man component oder requireJS benutzt, ist Dropzone auch dafür vorhanden.
Um nun den ersten Fileupload erstellen zu können, müsst ihr nur noch ein form Element mit der Klasse dropzone einfügen.
<form action="/file-upload" id="dropzoneImages"></form>
Das war es. Schon habt ihr eure eigene Dropzone. Leider nur zur Hälfte. Dropzone bietet die komplette Client aber nicht die Server Implementation, die müsst ihr selber bauen. Das kann in etwa so aussehen.
<? if ($_REQUEST) {
if (!empty($_FILES["file"]["tmp_name"])) {
// read dataname
$fileName = $_FILES["file"]["name"];
// upload file on server
copy($_FILES["file"], "PATH_TO_UPLOAD/{$fileName}");
}
}