DropzoneJS mit TYPO3

In diesem Blogbeitrag werde ich die Anwendung von DropzoneJS in einer Typo3-Erweiterung zeigen und erklären. Für jene die DropzoneJS noch nicht kennen: Es ist eine Javascript-Bibliothek für einen Bild-Upload und zwar mittels Drag and Drop, automatischem Ajax-Upload und Bildvorschau. Weiters lässt sich die Bibliothek sehr einfach integrieren, verwenden und auch anpassen. Aus diesem Grund haben wir auch DropzoneJS für den Bildupload ausgewählt.

Wer bisher noch nicht mit DropzoneJS gearbeitet hat, dem sei ein Blick auf www.dropzonejs.com ans Herz gelegt. Hier findet man auch die nötigen Informationen zur Installation/Konfiguration von dropzoneJS. Zuerst wird die JS-Datei eingebunden:

page.includeJSFooter.tx_vablog_dropzone = EXT:va_blog/Resources/Public/JavaScript/dropzone.js

Danach muss im Template noch eine Form oder ein anderes HTML-Element, welches als Image-Upload verwendet wird, hinzugefügt werden. Ein Beispiel:

<div class="dropzone" data-url="{f:uri.action(action: 'imageupload', controller: 'News', pluginName: 'vablog', pageType:'{settings.ajax.upload}')}"></div>

Serverseitig

Serverseitig muss nun für die Bibliothek eine Action erstellt werden, welche die hochgeladenen Dateien verarbeitet noch speichert. Hierbei wird die Datei über eine externe Bibliothek überprüft (Größe, MIME-Type, Seitenverhältnis etc.). Falls die Prüfung erfolgreich verläuft, wird die Datei gespeichert und das Ergebnis zurück geliefert (als json). Für die Bildüberprüfung wird die Image-Upload Bibliothek von Dhaval Kapil verwendet, welche man hier findet. 

public function imageuploadAction() {        try {            $imageUploader = new \ImageUploader();            $uniqueFilename = $this->generateUniqueFilename();            $imageUploader->setPath($this->settings['newsImageUploadFolderFileadmin']);            $imageUploader->upload($_FILES['file'], $uniqueFilename);            $ext = \Chilischarf\ChiliNews\Utility\ImageUtility::getExtension($_FILES['file']["name"]);        }        catch (\Exception $e) {            return json_encode(['success' => FALSE]);        }        return json_encode(            [                'success' => TRUE,                'filename' => $uniqueFilename . '.' . $ext,                'path' => $this->settings['newsImageUploadFolderFileadmin']            ]        );    }

Wie man in obigen Codeschnippsel erkennen kann, ist die Überprüfung erfolgreich wird als Ergebnis (success), der Filename und der Pfad zurück gesendet.

Formular absenden

Wir haben dropzoneJS zum Beispiel für die Erstellung von Blogbeiträgen verwendet. Hier kann der Benutzer neben Titel, Untertitel, Kategorie etc. auch Bilder hinaufladen. Nachdem die Dateien erfolgreich hochgeladen wurden, werden per JS die Dateinamen der Bilder per HTML-Input hidden Elemente im Formular gespeichert. Wird nun zum Beispiel ein neuer Newseintrag erstellt, wird am Server erkannt welche Bilder zu diesem hochgeladen wurden, und es muss nur noch die Relation zwischen Objekt und Datei (FileReference) erstellt werden.

Dropzone JavaScript Konfiguration

Hier noch das Code-Snippet für die Dropzone-Konfiguration:

var initDropzone = function() {    if(jQuery('.dropzone').length) {        Dropzone.autoDiscover = false;         jQuery('.dropzone').each(function () {            var $this = jQuery(this);             $this.dropzone({                url: $this.attr('data-url'),                acceptedFiles: 'image/*',                dictDefaultMessage: 'Bilder hochladen',                dictFallbackMessage: 'Ihr Browser wird leider nicht unterstützt',                dictFileTooBig: 'Die Datei ist zu groß',                dictInvalidFileType: 'Es werden nur Bilder unterstützt',                dictResponseError: 'Es werden leider ein Fehler aufgetreten. Code: {{statusCode}}',                createImageThumbnails: false,                previewTemplate: '........',                success: function (file, responseText) {                    var response = JSON.parse(responseText);                     if (response['success'] == true) {                        .............                    }                }            });        });    }};

Hiermit wurde auf sehr einfache Weise demonstriert wie dropzone in einer typo3-Erweiterung verwendet werden kann. Eines sei noch zur Browserunterstützung gesagt: Hier werden alle gängigen Browser (Chrome, Firefox, IE10+, Opera, Safari) unterstützt (auch mobile). Für alle weiteren Browser gibt es als Fallback ein einfaches File-Upload-Feld.

Quellen / Links