Attachments nachträglich hinzufügen

Ein Scaffold steht bereits, das Model ist fertig und die Anwendung läuft – aber später stellt sich heraus, dass noch ein Bild oder sogar eine ganze Bildergalerie fehlt.

Mit dem b4um Generator muss das Scaffold dafür nicht neu erstellt werden. Der Attachment-Generator kann ein bestehendes Model nachträglich um Active-Storage-Attachments erweitern.

In diesem Tutorial verwenden wir ein bereits vorhandenes Product. Es besitzt Name, Beschreibung, Preis und Status. Die Beschreibung verwendet bereits Action Text.

Zu Beginn enthält das Model also noch kein eigenes Bild-Attachment.

Ein einzelnes Bild nachträglich hinzufügen

Unser Product soll zunächst ein einzelnes Produktbild bekommen.

Dazu führen wir aus:

bin/rails generate b4um:attachment Product image

Der Generator meldet:

insert  app/models/product.rb
attachment  Product now has image
insert  app/views/products/_form.html.erb
gsub    app/controllers/products_controller.rb
insert  app/views/products/_product.html.erb

Der Generator erweitert dabei mehrere bereits vorhandene Bestandteile des Scaffolds. Im Model entsteht:

has_one_attached :image

Das Formular erhält ein Datei-Upload-Feld einschließlich Bildvorschau. Der Controller erlaubt das neue Attachment und die Resource-Ansicht erhält die Bildausgabe einschließlich Lightbox.

Eine zusätzliche image-Spalte in der products-Tabelle brauchen wir dafür nicht. Das Attachment wird von Active Storage verwaltet.

Nach einem Reload der Edit-Seite erscheint das neue Feld:

Image    [Datei auswählen]

Bild auswählen und Vorschau anzeigen

Wird eine Bilddatei ausgewählt, zeigt der vom Generator installierte Image-Preview-Controller das Bild bereits vor dem Speichern im Formular an.

Anschließend speichern wir das Product über:

Update Product

Das Bild wird nun auf der Product-Seite angezeigt.

Die Lightbox

Die Bildausgabe wird vom Attachment-Generator direkt mit der b4um-Lightbox ausgestattet.

Ein Klick auf das Produktbild öffnet die große Bildansicht. Bei einem einzelnen Attachment zeigt sie unter anderem den Zähler:

1 von 1

sowie Thumbnail, Dateiname und Schließen-Schaltfläche.

Damit ist das nachträglich ergänzte Single Attachment bereits vollständig einsatzbereit.

☒

Mehrere Bilder nachträglich hinzufügen

Dasselbe bestehende Product soll nun zusätzlich eine Bildergalerie erhalten.

Dafür verwenden wir den Attachment-Generator erneut, diesmal mit --multiple:

bin/rails generate b4um:attachment Product gallery --multiple

Im Product-Model stehen anschließend beide Varianten nebeneinander:

has_many_attached :gallery
has_one_attached :image

Das ist ein wichtiger Unterschied:

image     → has_one_attached
gallery   → has_many_attached

image enthält also genau ein Bild. gallery kann dagegen mehrere Bilder verwalten.
Der Generator erweitert außerdem das Formular, die Resource-Ausgabe und den Controller. Bei Multiple Attachments erhält die update-Action zusätzliche Logik, damit neue Bilder ergänzt und einzelne vorhandene Bilder entfernt werden können.

Single und Multiple im selben Formular

Nach einem Reload der Edit-Seite sehen wir nun beide Upload-Arten:

Image      [Datei auswählen]
Gallery    [Dateien auswählen]

Das bereits gespeicherte einzelne Produktbild bleibt dabei erhalten.

Mehrere Bilder gleichzeitig auswählen

Über:

Gallery → Dateien auswählen

können mehrere Bilder in einem Schritt ausgewählt werden.

In unserem Test haben wir drei Bilder ausgewählt. Noch bevor das Product gespeichert wurde, erschienen alle drei als Vorschau im Formular.

Nach Update Product enthält die Show-Seite nun sowohl das einzelne Product Image als auch die Gallery mit drei Bildern.

Auch die Multiple-Variante erhält automatisch die b4um-Lightbox.

Beim Öffnen eines Gallery-Bildes stehen zusätzlich Navigation und mehrere Thumbnails zur Verfügung:

1 von 3

‹                   ›

[1] [2] [3]

Mit den Pfeilen kann durch die Galerie navigiert werden. Ein Klick auf ein Thumbnail springt direkt zum entsprechenden Bild.

Einzelne Bilder aus der Gallery entfernen

has_many_attached bringt über den b4um Generator noch eine weitere Funktion mit.

Auf der Edit-Seite werden bereits gespeicherte Gallery-Bilder angezeigt. Ein Klick auf eines dieser Bilder markiert es zum Entfernen:

Will be removed

Erst mit Update Product wird die Änderung gespeichert.

Wir haben außerdem einen wichtigen Fall getestet: Gleichzeitig wurde ein vorhandenes Bild zum Entfernen markiert und ein neues Bild ausgewählt.

Aus:

3 vorhandene Bilder

wurde dabei:

2 vorhandene Bilder
+ 1 neues Bild
──────────────────
3 Gallery-Bilder

Die beiden nicht markierten Bilder blieben erhalten, das markierte Bild wurde entfernt und das neue Bild hinzugefügt. Das separate Single Attachment image blieb ebenfalls unverändert.

☒

Abschlusskontrolle

Zum Schluss haben wir überprüft, dass die Anwendung weiterhin sauber geladen werden kann:

bin/rails zeitwerk:check

Ergebnis:

Hold on, I am eager loading the application.
All is good!

Auch die Attachments haben wir direkt kontrolliert:

bin/rails runner 'p = Product.find_by(name: "MacBook Air"); puts "Image: #{p.image.attached?}"; puts "Gallery: #{p.gallery.count}"'

Ergebnis:

Image: true
Gallery: 3

Damit ist bestätigt, dass sowohl das nachträglich hinzugefügte Single Attachment als auch die Multiple Gallery korrekt gespeichert werden.

Fazit

Ein bestehendes Scaffold muss nicht neu erzeugt werden, nur weil später Bilder benötigt werden.

Für ein einzelnes Attachment genügt:

bin/rails generate b4um:attachment Product image

Für mehrere Attachments:

bin/rails generate b4um:attachment Product gallery --multiple

Der b4um Generator erweitert dabei das bestehende Model, das Formular, die Controller-Parameter und die Resource-Ausgabe. Bildvorschau und Lightbox werden ebenfalls integriert. Bei Multiple Attachments kommen die Verwaltung mehrerer Bilder und das gezielte Entfernen einzelner Attachments hinzu.

Damit lassen sich Bilder auch später in ein bereits bestehendes b4um-Scaffold integrieren, ohne das Scaffold neu aufbauen zu müssen.

Meld dich an und schreibe ein Kommentar