multi file upload structure

src/components/Fields/Image.tsx

@@ -11,7 +11,7 @@ const Image = (props: any) => {
     // Do something with the files
     const imageFile = acceptedFiles[0];
     if (imageFile) {
-      upload(rowData.ref, columnData.fieldName, imageFile);
+      upload(rowData.ref, columnData.fieldName, [imageFile]);
       let url = URL.createObjectURL(imageFile);
       setLocalImage(url);
     }
@@ -30,7 +30,7 @@ const Image = (props: any) => {
           <img style={{ height: "150px" }} src={localImage} />
         </div>
       ) : cellData ? (
-        <img style={{ height: "150px" }} src={cellData} />
+        <img style={{ height: "150px" }} src={cellData[0].downloadURL} />
       ) : isDragActive ? (
         <p>Drop the files here ...</p>
       ) : (

src/hooks/useFiretable/useUploader.ts

@@ -1,7 +1,7 @@
 import { useReducer } from "react";
 import { bucket } from "../../firebase/index";
 
-import firebase, { FirebaseError } from "firebase/app";
+import firebase from "firebase/app";
 const intialState = {};
 const uploadReducer = (prevState: any, newProps: any) => {
   return { ...prevState, ...newProps };
@@ -14,51 +14,64 @@ const useUploader = () => {
   const upload = (
     docRef: firebase.firestore.DocumentReference,
     fieldName: string,
-    file: File
+    files: File[]
   ) => {
-    const storageRef = bucket.ref(`${docRef.path}/${fieldName}/${file.name}`);
-    var uploadTask = storageRef.put(file);
-    uploadTask.on(
-      firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
-      function(snapshot: any) {
-        // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
-        var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
-        console.log("Upload is " + progress + "% done");
-        switch (snapshot.state) {
-          case firebase.storage.TaskState.PAUSED: // or 'paused'
-            console.log("Upload is paused");
-            break;
-          case firebase.storage.TaskState.RUNNING: // or 'running'
-            console.log("Upload is running");
-            break;
-        }
-      },
-      function(error: any) {
-        // A full list of error codes is available at
-        // https://firebase.google.com/docs/storage/web/handle-errors
-        switch (error.code) {
-          case "storage/unauthorized":
-            // User doesn't have permission to access the object
-            break;
+    files.forEach(file => {
+      const storageRef = bucket.ref(`${docRef.path}/${fieldName}/${file.name}`);
+      var uploadTask = storageRef.put(file);
+      uploadTask.on(
+        firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
+        function(snapshot: any) {
+          // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
+          var progress =
+            (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
+          console.log("Upload is " + progress + "% done");
+          switch (snapshot.state) {
+            case firebase.storage.TaskState.PAUSED: // or 'paused'
+              console.log("Upload is paused");
+              break;
+            case firebase.storage.TaskState.RUNNING: // or 'running'
+              console.log("Upload is running");
+              break;
+          }
+        },
+        function(error: any) {
+          // A full list of error codes is available at
+          // https://firebase.google.com/docs/storage/web/handle-errors
+          switch (error.code) {
+            case "storage/unauthorized":
+              // User doesn't have permission to access the object
+              break;
 
-          case "storage/canceled":
-            // User canceled the upload
-            break;
-          case "storage/unknown":
-            // Unknown error occurred, inspect error.serverResponse
-            break;
+            case "storage/canceled":
+              // User canceled the upload
+              break;
+            case "storage/unknown":
+              // Unknown error occurred, inspect error.serverResponse
+              break;
+          }
+        },
+        function() {
+          // Upload completed successfully, now we can get the download URL
+          uploadTask.snapshot.ref
+            .getDownloadURL()
+            .then(function(downloadURL: string) {
+              console.log("File available at", downloadURL);
+              // TODO: support mutliple files
+              docRef.update({
+                [fieldName]: [
+                  {
+                    downloadURL,
+                    name: file.name,
+                    type: file.type,
+                    lastModifiedTS: file.lastModified
+                  }
+                ]
+              });
+            });
         }
-      },
-      function() {
-        // Upload completed successfully, now we can get the download URL
-        uploadTask.snapshot.ref
-          .getDownloadURL()
-          .then(function(downloadURL: string) {
-            console.log("File available at", downloadURL);
-            docRef.update({ [fieldName]: downloadURL });
-          });
-      }
-    );
+      );
+    });
   };
 
   return [uploaderState, upload];