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.jsDanach 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 = \Vendor\Extension\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
Wir entwickeln digitale Lösungen mit Leidenschaft
Warum wir das tun? Weil die Verwirklichung Ihrer Vision unser größter Anspruch und die schönste Anerkennung ist. Deshalb nehmen wir uns gerne ausreichend Zeit für die Realisierung Ihres digitalen Projekts.
Kontaktieren Sie uns, wir sind gerne für Ihre Fragen da:
