Rails 7 - Podgląd uploadowanego obrazka
2022-02-02T21:02:00.000Z
Rails 7 - Podgląd uploadowanego obrazka
Rails 7 niosą ze sobą nie tyle powiew świeżości w budowaniu aplikacji webowych, co prawdziwą rewolucję. jQuery już dawno zostało wykurzone, teraz pora na mocne uniezależnienie się od frameworków frontendowych i miliona linii Javascript do ogarnięcia widoków.
Implementowałem ostatnio upload w aplikacji korzystającej z Hotwire i Stimulusa. Jestem more than happy, że aplikacja ma już dość złożony UI, a wciąż jest tam praktycznie kilkanaście linii JS.
Stanąłem przed problemem zrobienia podglądu uploadowanego obrazka jeszcze przed zapisaniem formularza. Scenariusz wygląd tak, że użytkownik klika Choose file, wybiera obrazek, który automatycznie wyświetla się w miejscu przeznaczonym na podgląd.
A tak to ogarnąłem z wykorzystaniem Stimulusa, którego zaczynam coraz bardziej lubić, ze względu na jego banalność.
Na potrzeby przykładu stworzyłem taki mega uproszczony widok.
Następnie utworzyłem Stimulus controller ImageUploadPreview.
Ustaliłem dwa targety:
img, gdzie wyświetlam podgląd wybranego obrazkaNastępnie w funkcji setImagePreview zawarłem całą logikę.
Po kolei:
reader.onload - eventu, wywołanego, kiedy wybrany obrazek zostanie załadowany w readerzesrc podglądu jako resultat z readeraTyle, koniec magii.
Teraz tylko trzeba podpiąć controller, targety i akcję do elementów w widoku.
data-controller jest ustawiony w kontenerze dla inputa i podglądufile_field_tag i image_tag są oznaczone jako targety input i previewsetImagePreviewKońcowa funkcjonalność wygląda tak:
