Merge pull request #96 from sachintom999/fix-profile-picture-upload-p…

…review Added profile picture preview on successful upload
OpenUnited · Oct 20, 2023 · c823d51 · c823d51
2 parents d51c158 + b97f14c
commit c823d51
Showing 1 changed file with 34 additions and 3 deletions.
diff --git a/talent/templates/talent/profile_picture.html b/talent/templates/talent/profile_picture.html
@@ -1,8 +1,10 @@
 <div id="profile-picture" class="flex items-center shrink-0 flex-col lg:w-[244px]">
-    <div id="profile-picture"
+    <div id="profile-picture-placeholder"
         class="w-40 h-40 flex items-center justify-center rounded-full bg-no-repeat bg-center bg-cover"
         style="background-image: url('{{ photo_url }}')">
     </div>
+        <img id="image-preview" src="" alt="Image Preview" 
+        class="w-40 h-40 flex items-center justify-center rounded-full bg-no-repeat bg-center bg-cover hidden" />
     <div class="flex flex-col items-center">
         {% if requires_upload %}
         <label for="{{ form.photo.id_for_label }}"
@@ -44,7 +46,7 @@
                 Upload
             </label>
 
-            <label for="remove_picture_button"
+            <label for="remove_picture_button" id="label_remove_picture_button"
                 class="mt-4 appearance-none inline-flex items-center w-full sm:w-fit bg-white text-sm font-semibold leading-6 transition-all delay-600 rounded px-2.5 md:px-3.5 py-1.5 text-gray-900 shadow-sm hover:bg-gray-900/[0.8] hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent cursor-pointer border border-solid border-[#ddd] hover:border-gray-900/[0.8]">
                 <input id="remove_picture_button" type="submit" hx-get="{{ url('profile', args=(pk,)) }}" hx-target="#profile-picture" hx-confirm="Are you sure to remove the picture?"
                     class="hidden appearance-none inline-flex items-center w-full sm:w-fit bg-white text-sm font-semibold leading-6 transition-all delay-600 rounded px-2.5 md:px-3.5 py-1.5 text-gray-900 shadow-sm hover:bg-gray-900/[0.8] hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent cursor-pointer border border-solid border-[#ddd] hover:border-gray-900/[0.8]">
@@ -60,4 +62,33 @@
         </div>
         {% endif %}
     </div>
-</div>
+</div>
+
+<script>
+document.querySelector("#id_photo").addEventListener("change", function (e) {
+    const fileInput = e.target
+
+    const imagePreview = document.getElementById("image-preview")
+    const placeholder = document.getElementById("profile-picture-placeholder")
+    const removeButton = document.getElementById("label_remove_picture_button")
+
+    if (fileInput.files && fileInput.files[0]) {
+        const reader = new FileReader()
+
+        reader.onload = function (event) {
+            imagePreview.src = event.target.result
+            imagePreview.classList.remove("hidden")
+            placeholder.style.display = "none"
+            if (removeButton) {
+                removeButton.style.display = "none"
+            }
+        }
+
+        reader.readAsDataURL(fileInput.files[0])
+    } else {
+        imagePreview.src = ""
+        imagePreview.style.display = "none"
+    }
+})
+
+</script>