add in confirm change button

src/pages/profile_page.html

@@ -104,6 +104,7 @@
 <div id="resize_photo_dialouge" class="card static_center hidden">
     <div id="resize_photo_box"></div>
     <img id="new_profile_image" alt="new-profile-image" />
+    <button id="confirm_change">Confirm Change</button>
 </div>
 
 <img id="logo_image" alt="logo" src="/logo" />
@@ -176,6 +177,7 @@
 <script type="text/javascript">
     const button = document.getElementById("edit_picture_button");
     const fileInput = document.getElementById("file_input");
+    const confirm_change = document.getElementById("confirm_change");
 
     button.addEventListener("click", () => {
         fileInput.click(); // opens file picker
@@ -183,12 +185,14 @@
 </script>
 
 <script type="text/javascript">
-    var currentPreviewURL = null;
+    var currentPreviewURL = null,
+        image = null,
+        file = null;
 
     fileInput.addEventListener("change", async () => {
         document.getElementById("popup_background").classList.remove("hidden");
 
-        const file = fileInput.files[0];
+        file = fileInput.files[0];
         if (!file) return;
         if (file.type !== "image/jpeg") {
             alert("Only JPEG images are allowed.");
@@ -200,7 +204,7 @@
             .getElementById("resize_photo_dialouge")
             .classList.remove("hidden");
 
-        var image = URL.createObjectURL(file);
+        image = URL.createObjectURL(file);
         const bitmap = await createImageBitmap(file);
 
         var new_profile_image = document.getElementById("new_profile_image");
@@ -213,6 +217,12 @@
             bitmap.height + "px",
         );
         return;
+    });
+
+    confirm_change.addEventListener("click", async () => {
+        document
+            .getElementById("resize_photo_dialouge")
+            .classList.add("hidden");
 
         const formData = new FormData();
         formData.append("photo", file);