Contao Upload Element

Soll den Usern einer Website die Möglichkeit gegeben werden, Dateien hochzuladen und somit auf unserem Server zu hinterlegen, kann hierzu ein Standard-Element von Contao genutzt werden. Das Upload-Element findet sich innerhalb des Formulargenerators und wird in diesem Zusammenhang wohl auch am ehesten benötigt. Da dem User vermutlich nicht nur die Möglichkeit des Datei Uploads angeboten werden soll, sondern auch noch ein paar weitere Angaben benötigt werden (Name, Zusatzinfo, etc.) bietet sich die Einbettung in den Formulargenerator also durchaus an: Hier können die passenden Felder direkt mit angelegt werden. 

Vorbereitende Schritte in Contao

Um nun also ein Upload-Element zu verwenden, legen wir am Besten zunächst zwei Seiten in der Seitenstruktur an. Eine benötigen wir für die Ausgabe unseres Upload-Elements, bzw. unser Formular, die andere fungiert als sogenannte Danke-Seite. Diese wird angezeigt, sobald der User nach dem Upload auf Absenden oder Speichern geklickt hat - und bedankt sich beispielsweise mit einem freundlichen Satz für die Interaktion. 

Der Formulargenerator

Nachdem die beiden Seiten angelegt sind, können wir auch schon unser Formular erstellen.
Hierzu begeben wir uns unter den Contao-Backendmodulen zum Formulargenerator und wählen die Option "Neues Formular". Im folgenden Dialog müssen wir einen Titel vergeben.
Optional ist hingegen die Angabe der Weiterleitungsseite, also jene Seite, die angezeigt wird, nachdem das Formular abgesendet wurde. Hier können wir nun also unser eben angelegte Dankes-Seite auswählen. Idealerweise wählen wir nun auch die Option unter Tabellenloses Layout, damit keine - mittlerweile veralteten - Tabellen auf unserer Seite angezeigt werden.

Sollen die Daten nach dem Absenden des Formulars an uns weitergeleitet werden, können wir unter Formulardaten versenden ->  Per E-Mail versenden auswählen unsere E-Mail-Adresse und den Betreff der Nachricht angeben. Die weiteren Einstellungen sind für unser Upload-Element zunächst unerheblich - wir haben diese aber auch noch einmal ausführlicher in unserem Beitrag "5 Schritte zum einfachen Kontaktformular mit Contao" beschrieben.

Nach dem Speichern & Schließen des Formulars können wir nun auch schon unsere Felder anlegen. Hierzu wählen wir die Bearbeiten-Funktion an unserem Formular und können mit der Funktion Neues Feld und dem sich öffnenden Dialog nun als Feldtyp das gewünschte Datei-Upload Element auswählen.
Der Feldname muss als eindeutige Identifizierung vergeben werden, die Feldbezeichnung hingegen ist optional. Füllen wir dieses Feld aus und haben zuvor das Tallenlose Layout ausgewählt, erscheint dieser Eintrag in einem label-Tag auf unserer Webseite.

Unter dem Reiter Feldkonfiguration können wir nun auswählen, ob der Datei-Upload notwendig ist, um das Formular abzusenden, sowie die für den Upload erlaubten Dateitypen beschränken oder ausweiten.

Unter dem Reiter Datei speichern können wir jetzt auch das Zielverzeichnis der hochgeladenen Datei bestimmen. In diesem Ordner finden wir unsere Uploads dann später innerhalb der Contao Dateiverwaltung oder via FTP wieder. Damit sich Dateien mit gleichem Datei-Namen nicht versehentlich überschreiben, ist es zudem sinnvoll, die Option "Bestehende Dateien erhalten" auszuwählen. In diesem Fall wird den Dateien gleichen Namens jeweils ein Suffix hinzugefügt.Alternativ haben wir die Möglichkeit, dass jeder registrierte Benutzer ein eigenes Verzeichnis erhält. Dann bleibt es dem Benutzer selbst überlassen, ob er die Datei beim hochladen überschreiben möchte. Voraussetzung ist, wie gesagt, dass der Benutzer dann angemeldet sein muss.

Die weiteren Optionen entsprechen im Wesentlichen den allgemeinen Optionen für die Formularfelder und sind von uns im Beitrag "Einfaches Kontaktformular mit Contao" ausführlicher beschrieben.
Nach dem Speichern und Schließen können wir je nach Anwendungszweck weitere Felder, sowie das Absenden-Button hinzufügen. Haben wir alle gewünschten Felder zusammen, können wir unser Modul auf unserer Seite einsetzen.

Die Elemente im Artikel

Hierzu wählen wir innerhalb der Backend-Module -> Inhalte -> Artikel und anschließend die gewünschte Seite aus. Nach der Auswahl eines neuen Elements und Festlegung der Position, wählen wir unter Elementtyp das Include-Element und darunter liegende Formular aus. Jetzt müssen wir nur noch unter dem Reiter Include-Einstellungen unser eben angelegtes Formular auswählen und die Auswahl speichern. Wählen wir nun oben die Frontend-Vorschau von Contao, sollten wir unser Upload-Element auch im Frontend unserer Webseite angezeigt bekommen. Hier können wir es nun mittels CSS an das Layout unserer Seite anpassen.