Typo3 Flow: HTML5 Multiple File Upload erstellen

Typo3 Flow: HTML5 Multiple File Upload erstellen

Posted by ariesprodesign in Allgemein, HTML5, Internet, PHP, Programmierung, Typo3 Flow, TYPO3 Neos, Webdesign 28 Dez 2014

Heute wollte ich euch zeigen, wie man mit Typo3 Neos bzw. Typo3 Flow eine der Neuerungen in HTML 5 nutzen kann, also die Möglichkeit, mehrere Dateien über ein Dateieingabefeld hochzuladen.

Wir haben einige Bildergalerien und brauchen eine Möglichkeit, für diese Bildergalerien, Bilder auf unseren Server hochzuladen und zwar mehrere auf einem Mal.

Bis jetzt haben wir auf der Startseite Links zu den jeweiligen Bildergalerien.

gallery-links

Und wie wir sehen sind sie Leer.

gallery-empty

Jetzt bauen wir unser Formular auf.

Um unsere Bilder zu einen der Galerie zuordnen zu können, müssen wir den Script irgendwie sagen zu welcher Galerie er die Bilder zuordnen soll, deshalb bauen wir dort eine Auswahlliste (Dropdown-Liste) damit wir eine Galerie auswählen können.

Das aller wichtigste ist den Namen, mit den eckigen Klammern am Ende anzugeben, etwa so: file[]

Hier ein Mal das ganze Formular:

Und so sieht das aus:

multi-upload

Wenn wir jetzt Dateien hochladen wollen, merken wir, dass man mehrere Dateien gleichzeitig auswählen kann:

explorer

Jetzt gehen wir zu dem Kontroller.

Einige Vorbereitungen müssen wir dort vornehmen. Wir müssen die Resource Manager deklarieren bzw. injizieren so wie unser Gallery Repository und unser GalleryImage Repository.

Der Kontroller erwartet die Galerie aus unserer Auswahlliste, also fangen wir so an:

Falls wir Dateien empfangen, müssen wir wie folgt über die globale $_FILE Variable iterieren. Dann speichern wir die Werte in einen Array und mit Hilfe der Resource Manager importieren die Dateien. Die resultierende Resource wird in unserem neuen GalleryImage-Model gespeichert und zu unserer Galerie zugeordnet.

Hier ein Mal den ganzen Controller:

Jetzt wenn wir die Galerie aufrufen:

gallery2

Wenn Ihr Fragen habt, könnt Ihr gerne ein Kommentar schreiben. Danke

  • Sanja Mai 4, 2015 at 2:49 pm / Antworten

    Nice post. I was checking connsattly this blog and I’m impressed! Extremely useful info specifically the last part I care for such info a lot. I was looking for this certain info for a long time. Thank you and best of luck.

Schreiben Sie einen Kommentar