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 preview
setImagePreview
Końcowa funkcjonalność wygląda tak:
