Refactor image preview on upload field in partner admin in stimulus

app/javascript/controllers/image_preview_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="image-preview"
+export default class extends Controller {
+	static targets = ["img"];
+
+	connect() {}
+
+	file(event) {
+		const file = event.target.files[0];
+		const reader = new FileReader();
+		reader.onload = (e) => {
+			const base64 = e.target.result;
+			this.imgTarget.src = base64;
+			this.imgTarget.style.display = "block";
+		};
+		reader.readAsDataURL(file);
+	}
+}

app/javascript/controllers/index.js

@@ -4,6 +4,9 @@
 
 import { application } from "./application"
 
+import ImagePreviewController from "./image_preview_controller.js"
+application.register("image-preview", ImagePreviewController)
+
 import LeafletController from "./leaflet_controller.js"
 application.register("leaflet", LeafletController)
 

app/javascript/src/behaviors/behaviors.partner.js

@@ -8,19 +8,6 @@ jQuery.extend(Behaviors, {
 
         /* */
 
-        var preview = $(".brand_image");
-
-        $("#partner_image").change(function(event){
-           var input = $(event.currentTarget);
-           var file = input[0].files[0];
-           var reader = new FileReader();
-           reader.onload = function(e){
-              image_base64 = e.target.result;
-              preview.attr("src", image_base64);
-           };
-           reader.readAsDataURL(file);
-        });
-
         $(document).on('nested:fieldAdded:places', function(e) {
           var id = 'js-map-'+e.timeStamp
           $('#js-map').attr('id',id);

app/views/admin/partners/_form.html.erb

@@ -17,12 +17,17 @@
     <%= f.input :accessibility_info, class: "form-control", label: 'Accessibility Information', input_html: { rows: 7 } %>
 
     <div class="row">
-      <div class="col-md-6">
+      <div class="col-md-6" data-controller="image-preview">
         <%= f.input :image,
           hint: image_uploader_hint(@partner.image),
-          as: :file %>
-
-        <%= image_tag @partner.image.url, width: '125', class: 'brand_image' if @partner.image.url %>
+          as: :file,
+          input_html: { data: { action: "change->image-preview#file"} }
+        %>
+        <% if @partner.image.url  %>
+          <%= image_tag @partner.image.url,  width: '125', class: 'brand_image', data: { image_preview_target: "img"}  %>
+        <% else  %>
+          <%= image_tag "", style: 'display:none;', width: '125', class: 'brand_image', data: { image_preview_target: "img"} %>
+        <% end  %>
       </div>
 
     </div>

test/system/admin/partner_test.rb

@@ -57,4 +57,15 @@ class AdminPartnerTest < ApplicationSystemTestCase
     assert_select2_single @neighbourhood_one, service_areas[0]
     assert_select2_single @neighbourhood_two, service_areas[1]
   end
+
+  test 'image preview on partner form' do
+    click_sidebar 'partners'
+    await_datatables
+    click_link @partner.name
+    find(:css, '#partner_image', wait: 15)
+    attach_file('partner_image', File.absolute_path('./test/system/admin/damir-omerovic-UMaGtammiSI-unsplash.jpg'))
+    base64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWi'
+    preview = find(:css, '.brand_image', wait: 15)
+    assert preview['src'].starts_with?(base64), 'The preview image src is not the expected value'
+  end
 end