VPS-50/fix image bug

frontend/src/containers/pages/AuthoringTool/AuthoringToolPage.jsx

@@ -89,8 +89,8 @@ export default function AuthoringToolPage() {
   }
 
   /** called when save and close button is clicked */
-  function savePlusClose() {
-    saveScene();
+  async function savePlusClose() {
+    await save();
     /* redirects user to the scenario page */
     window.location.href = `/scenario/${currentScenario?._id}`;
   }

frontend/src/containers/pages/AuthoringTool/ToolBar/Background/UploadImage.jsx

@@ -15,7 +15,7 @@ export default function UploadImage() {
   const inputFile = useRef(null);
 
   const handleFileInput = async (e) => {
-    const url = await URL.createObjectURL(e.target.files[0]);
+    const url = URL.createObjectURL(e.target.files[0]);
     addFirebaseImage(currentScene, setCurrentScene, e.target.files[0], url);
     inputFile.current.value = null;
   };

frontend/src/firebase/storage.js

@@ -20,17 +20,57 @@ import { storage } from "./firebase";
  * @returns
  */
 const uploadFile = async (file, scenarioId, sceneId, isEndImage) => {
-  const fileUUID = isEndImage ? "endImage" : v4();
-  const storageRef = ref(storage, `${scenarioId}/${sceneId}/${fileUUID}`);
-  const uploadTask = await uploadBytesResumable(storageRef, file);
-  const url = await getDownloadURL(uploadTask.ref);
-  const metaData = {
-    customMetadata: {
-      count: 1,
-    },
-  };
-  await updateMetadata(storageRef, metaData);
-  return url;
+  const fileUUID = isEndImage ? "endImage" : v4(); // Generate a UUID or use "endImage"
+  const storageRef = ref(storage, `${scenarioId}/${sceneId}/${fileUUID}`); // Create a storage reference
+  const uploadTask = uploadBytesResumable(storageRef, file); // Start the upload
+
+  // Return a promise that resolves with the download URL
+  return new Promise((resolve, reject) => {
+    uploadTask.on(
+      "state_changed",
+      (snapshot) => {
+        // Handle upload progress
+        const progress =
+          (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+        console.log(`Upload is ${progress}% done`);
+        switch (snapshot.state) {
+          case "paused":
+            console.log("Upload is paused");
+            break;
+          case "running":
+            console.log("Upload is running");
+            break;
+          default:
+            break;
+        }
+      },
+      (error) => {
+        // Handle errors
+        console.log("Error in uploading file:", error);
+        reject(error);
+      },
+      async () => {
+        try {
+          // Get the download URL after the upload is complete
+          const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);
+          console.log("File available at", downloadURL);
+
+          // Update metadata if needed
+          const metaData = {
+            customMetadata: {
+              count: 1,
+            },
+          };
+          await updateMetadata(storageRef, metaData);
+
+          // Resolve the promise with the download URL
+          resolve(downloadURL);
+        } catch (error) {
+          reject(error);
+        }
+      }
+    );
+  });
 };
 
 /**
@@ -47,12 +87,15 @@ const deleteFile = (fileUrl) => {
 };
 
 /**
- * Method to upload file to Firebase storage storage
- * @param {[components]} components - list of components
- * @param {string} scenarioId
- * @param {string} sceneId
+ * Method to upload files to Firebase Storage
+ * @param {[Object]} components - List of components
+ * @param {File} endImage - The end image file to upload
+ * @param {string} scenarioId - The ID of the scenario
+ * @param {string} sceneId - The ID of the scene
+ * @returns {Promise<void>}
  */
 const uploadFiles = async (components, endImage, scenarioId, sceneId) => {
+  // Loop through each component and upload if it's a FIREBASEIMAGE or FIREBASEAUDIO
   for (let i = 0; i < components.length; i += 1) {
     if (
       (components[i].type === "FIREBASEIMAGE" ||
@@ -65,12 +108,14 @@ const uploadFiles = async (components, endImage, scenarioId, sceneId) => {
         sceneId,
         false
       );
-      delete components[i].fileObject;
+      delete components[i].fileObject; // Remove the fileObject after uploading
     }
   }
 
+  // Upload the endImage if provided
   if (endImage) {
-    await uploadFile(endImage, scenarioId, sceneId, true);
+    const endImageUrl = await uploadFile(endImage, scenarioId, sceneId, true);
+    console.log("End image uploaded at:", endImageUrl);
   }
 };