Usability großgeschrieben - Hochladen von Dateien in Contao

Formulare mit Fileuploads

Oft bieten Formulare im Internet die Möglichkeit Dateien anzuhängen. Hier zeigen sich vor allem bei etwas größeren Dateien entscheidende Nachteile:

• Die angehängten Dateien werden erst mit dem Absenden des Formulars übertragen.
• Das kann bei größeren Dateien in Abhängigkeit von der verfügbaren Bandbreite einige Zeit in Anspruch nehmen.
• Tritt im Formular ein Fehler auf, muss die Datei erneut angehängt und übertragen werden.
• Das ist insbesondere dann ärgerlich, wenn der Fehler die Datei selbst betrifft, z.B. weil sie zu groß ist, da die Prüfung auf dem Server erst nach der Übertragung erfolgt.
• Oft sieht ein Formular nur die Übertragung einer einzelnen Datei vor, so dass man das Formular wiederholt nutzen muss, um weitere Dateien zu übertragen.

Dateiverwaltung in Contao

Contao bietet eine eigenständige Dateiverwaltung, d.h. hier werden die Dateien – in der Hauptsache Bilder – getrennt von anderen Inhalten verwaltet. Formularfehler beziehen sich somit immer nur auf die übertragene Datei. In der Contao-Standardkonfiguration kann man jedoch immer nur eine Datei übertragen. In den Einstellungen kann – und sollte – man daher dies unter Simultane Datei-Uploads ändern.

Contao besitzt eine Erweiterungsschnittstelle, so dass die Integration eigener Erweiterungen einfach vorzunehmen ist. Auch wir von trilobit haben schon einige Erweiterungen geschrieben, von denen wir auch einige als Open Source öffentlich zugänglich gemacht haben.

Die Alternative: Datei-Upload per AJAX

Das erste „A“ in AJAX steht für asynchron, d.h. das Übertragen der Datei(en) findet unabhängig vom Versand des Formulars statt, z.B. parallel zum Ausfüllen des Formulars. Eine sehr schöne Lösung hat Andrew Valums mittels jQuery implementiert. Man kann als Benutzer einfach Dateien per Drag’n’Drop in den Browser ziehen. Beim Upload wird ein Fortschrittsbalken angezeigt, so dass man sehen kann, wie lange es noch dauert, bis alle Dateien übertragen sind. Für Contao gibt es dazu die Erweiterung valumsFileUploader, die wir in alle unsere aktuellen Installationen einbinden. Welchen Mechanismus man zur Übertragung von Dateien nutzen möchte, kann man in Persönliche Einstellung wählen.

Bildbearbeitung nach dem Upload

Noch benutzerfreundlicher wird es, wenn man die Bilder nach dem Upload auf dem Server bearbeiten kann. Dabei ist vor allem die Auswahl von Ausschnitten und Skalierungen wichtig. Stehen dann noch einfache Funktionen zur Verfügung, wie Rahmen in einer bestimmten Farbe aufzuziehen, sind die meisten Benutzer schon sehr glücklich. Oliver Hoff stellt dafür – gegen einen kleinen finanziellen Beitrag – die Erweiterung backboneit_imagetools für Contao zur Verfügung, die wir auch gerne einsetzen.

Damit ist man in Contao selbst schon gut für die meisten Bildverwaltungsaufgaben gerüstet.

Die Situation in Isotope

Isotope ist eines der beiden bekannten Shopsysteme für Contao, das in der Crew um Andreas Schempp entwickelt wird. Wir setzen es in unserem bisher einzigen Shop-Projekt ein, das im September 2012 online gegangen ist: der Relaunch des Aschaffenburger Live-Music-Clubs „Colos-Saal“.

Auch hier kann man zu den Shop-Produkten – in unserem Fall den Konzertveranstaltungen – Bilder auf den Server hochladen. Bisher war dies jedoch nur beim Anlegen oder Pflegen der Produkte möglich, und jeweils nur ein Bild pro Speichervorgang. Dazu kommt, dass Isotope die Bilder getrennt von Contao verwaltet und auch Module wie backboneit_imagetools nicht automatisch eingebunden werden.

Die Lösung

trilobit hat hier in Zusammenarbeit mit den Entwicklern der beiden Erweiterungen Abhilfe geschaffen: Der Quellcode von Isotope ist öffentlich in einem Repository auf Github verfügbar, so dass jeder Programmierer seine Änderungsvorschläge einreichen kann. In einem ersten Schritt haben wir die Anzahl der Datei-Uploads an die Voreinstellung von Contao angepasst, so dass man jetzt mehrere Dateien auf einmal übertragen kann. Der zweite Schritt war dann das Auslesen der persönlichen Einstellungen: Ist dort Valums File-Uploader eingestellt, wird er auch in Isotope verwendet. In der nächsten Version werden Andreas Schempp und sein Team diese Modifikationen übernehmen.

Last but not least wurde der Code von Isotope so modifiziert, dass auch Oliver Hoffs Bildbearbeitungswerkzeuge automatisch eingebunden werden, wenn diese installiert sind. Dazu haben wir mit dem Entwickler gesprochen und ebenfalls Zugang zum Quellcode in seinem SVN-Repository erhalten. So konnten wir auch hier den Quellcode an die neuen Bedürfnisse anpassen, so dass unsere Code-Ergänzungen in die nächste Version mit einfließen.