Das Standart <input type="file">  sieht auch in modernen Browsern noch sehr schnöde aus und lässt sich, zumindest im Element selber, nicht sehr gut stylen. Doch gepaart mit einem <label> Element und dem for Attribut kann man sich mit sehr einfachen Mitteln schicke Bilduploadfelder basteln. Das for Attribut des <label>  muss hierzu einfach nur auf das id Attribut des zugehörigen <input>  verweisen. Klickt man dann auf das Label öffnet sich der systemweite Dateiauswahldialog. Das  <label>  kann nicht nur Text, sondern auch Bilder enthalten und zusammen mit ein wenig Javascript kann man so relativ leicht wirklich schicke Imageuploader realisieren.

Da mein Werkzeug der Wahl cakePHP3 ist, habe ich mir das ganze Prozedere direkt in einen eigenen FormHelper implementiert, so dass ich in einem beliebigen Template einfach nur noch folgendes aufrufen muss:

Eigene Helper werden in den src/View/Helper Ordner gespeichert. In meinem Fall heißt der Helper einfach MyFormHelper.php und sieht folgendermassen aus:

Wie man sieht werden die bekannten Form- und HTMLHelper Funktionen verwendet. Ist kein Bild vorhanden wird mit Holder.js (https://github.com/imsky/holder) ein Vorschaubild mit der gewünschten Größe dargestellt. Auf Wunsch kann man hier aber auch Text oder ein statisches Bild hinterlegen. Nachdem eine Datei ausgewählt wurde, sorgt der kleine Scriptblock dafür, dass diese als Vorschau angezeigt wird. Das Skript stammt von Ivan Baev aus dem stackoverflow Beitrag: https://stackoverflow.com/a/4459419/2319217

Den Helper dann einfach im gewünschten Controller über das  $helper  Array nutzbar machen:

Damit wird in den Templates des zugehörigen Controllers die Klasse MyForm  verfügbar. Alternativ kann man auch den bestehenden FormHelper erweitern:

Da die Klasse MyFormHelper den cakePHP FormHelper erweitert, kann man wie gewohnt in Templates jetzt auch $this->Form->imageUpload()  aufrufen.

Viel Spaß damit!

 



Kategorien: Tutorials
Tags: /

23. Juni 2015

Verfasst von
Sebastian Köller