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

Standardmäßig legt man mit Dropzonejs ein eigenes Form-Tag an. Bilder werden automatisch hochgeladen. Wir wollen aber ein etwas anderes Verhalten erreichen.

• Über das Dropzone.options Objekt können wir ein beliebiges Div für die Dropzone nutzen. Dazu Instanziiert man für eine div mit der id myDropzone etwa so:

Dropzone.options.myDropzone= {...

• Damit Dropzone die Dateien nicht sofort hochlädt deaktivieren wir die Option autoProcessQueue
• Wenn der Submit Button geklickt wird fangen wir das Standardverhalten des Browsers, hängen die Daten des Formulars an die Dropzonedaten und lssen Dropzone alles absenden.

Das Skript sieht dann etwa so aus:

Dropzone.options.myDropzone= {
    url: './',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 5,
    maxFiles: 5,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-form").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        // Send all form fields along with images
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("fullname", jQuery("#fullname").val());
            formData.append("email", jQuery("#email").val());
						formData.append("message", jQuery("#message").val());
						formData.append("newsletter_subscribe", jQuery("#newsletter_subscribe").val());
        });
    }
}

Häh ?

So geht das in der Praxis...