feat: implement previewPhoto handler (forem#21323)

amishakov · Oct 14, 2024 · e04390c · e04390c
1 parent 99d0828
commit e04390c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/app/javascript/packs/userProfileSettings.js b/app/javascript/packs/userProfileSettings.js
@@ -21,6 +21,27 @@ export function fieldCharacterLimits() {
       ...event.target.value,
     ].length;
   });
+
+  const imageInput = userSettingForm.querySelector('[id="user[profile_image]"');
+
+  const previewPhoto = () => {
+    const file = imageInput.files;
+
+    if (!file) return;
+
+    const fileReader = new FileReader();
+
+    const preview = userSettingForm.querySelector(
+      '#user-profile-image-preview',
+    );
+
+    fileReader.onload = function (event) {
+      preview.setAttribute('src', event.target.result);
+    };
+    fileReader.readAsDataURL(file[0]);
+  };
+
+  imageInput.addEventListener('change', previewPhoto);
 }
 
 fieldCharacterLimits();
diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb
@@ -45,7 +45,7 @@
       <div class="flex items-center">
         <% if @user.profile_image_url.present? %>
           <span class="crayons-avatar crayons-avatar--xl mr-2">
-            <img alt="<%= @user.username %> profile image" src="<%= @user.profile_image_url_for(length: 50) %>" class="crayons-avatar__image" loading="lazy" />
+            <img id="user-profile-image-preview" alt="<%= @user.username %> profile image" src="<%= @user.profile_image_url_for(length: 50) %>" class="crayons-avatar__image" loading="lazy" />
           </span>
         <% end %>
         <%= f.file_field "user[profile_image]", accept: "image/*", class: "crayons-card crayons-card--secondary p-3 flex items-center flex-1 w-100" %>