ProcessWire UploadFormular Dropzone Enhanced

Siehe auch

HTML5 - Drag n Drop Upload

Dieses Beispiel basiert auf: ProcessWire Upload Formular. Wir möchten für eine komfortablere User Eingabe DropzoneJS nutzen. Die Konfiguration soll sehr sicher sein, daher werden wir etliche Features voraussichtlich nicht nutzen. Außerdem wäre ein Honeypot nicht schlecht um Spambots einzufangen.

Schritt 1 - Dropzone Skripte einbinden

Im Footerbereich des Templates (ich nutze dazu immer eine Variable) binden wir das Skript ein. Dazu im Head auch gleich das mitgelieferte Basis CSS, damit wir uns etwas Arbeit sparen.

$additionalHeaderData .= '
<link rel="stylesheet" href="'.urls()->templates.'vendors/dropzone/basic.css">
';
$additionalFooterData .= '
<script src="'.urls()->templates.'vendors/dropzone/dropzone.js"></script>
';

Dropzone ist jetzt bereits aktiv und kann über window.dropzone angesprochen werden.

Schritt 2 - Das Formular für Dropzone einrichten

Der auf Dropzonejs.com beschriebene Standardweg ist ein eigenes Form Tag mit der Klasse dropzone auszustatten. Doof aber wenn man aber die Daten des eigenen Forms gleichzeitig bearbeiten will. Daher gehen wir folgendermaßen vor:

1. Wir nutzen unser Formular das bereits ein Upload Feld und die passenden Argumente hat.
2. Wir nutzen ein eigenes div für die Dropzone und setzen eine id. Mit dieser id sagen wir dropzone wo es ansetzen soll.
3. In Dropzones Optionen deaktivieren wir autoProcessQueue, damit die Dateien erst übermittelt werden, wenn wir das Formular absenden. Außerdem erlauben wir multiple Uploads.
4. Wir nutzen die init function um selbst die Ausführung zu übernehmen. Hier können wir dann das sendingmultiple eventhandler nutzen um alles abzuschicken.
5. Auf diese Weise können wir wie vorher ohne dropbox die Files über $_POST und $_FILES bearbeiten.

Häh ?

So geht das in der Praxis...