make new photo pop up in box before changing

src/pages/profile_page.html

@@ -101,6 +101,10 @@
     <button id="final_change_password_button">Change Password</button>
 </div>
 
+<div id="resize_photo_dialouge" class="card static_center hidden">
+    <img id="new_profile_image" alt="new-profile-image" />
+</div>
+
 <img id="logo_image" alt="logo" src="/logo" />
 <div id="main_content">
     <div class="cards">
@@ -190,6 +194,16 @@
             fileInput.value = "";
             return;
         }
+
+        document
+            .getElementById("resize_photo_dialouge")
+            .classList.remove("hidden");
+
+        document.getElementById("new_profile_image").src =
+            URL.createObjectURL(file);
+
+        return;
+
         const formData = new FormData();
         formData.append("photo", file);
         formData.append(

static/profile_page.css

@@ -116,6 +116,10 @@
     position: fixed;
 }
 
+#resize_photo_dialouge {
+    z-index: 10000;
+}
+
 #change_password_dialogue input {
     width: 350px;
 }