Track upload progress

client/src/ImageUpload/index.jsx

@@ -10,6 +10,8 @@ const ImageUpload = ({ onImageUpload }) => {
   const { t } = useTranslation(); 
   const { showSnackbar } = useSnackbar();
   const [images, setImages] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [progress, setProgress] = useState(0);
 
   const onDrop = useCallback((acceptedFiles, fileRejections) => {
     if (fileRejections.length) {
@@ -19,20 +21,20 @@ const ImageUpload = ({ onImageUpload }) => {
         return;
       }
     }
-  
+
     const totalImages = images.length + acceptedFiles.length;
     if (totalImages > 2) {
       showSnackbar(t("error.configuration.image_upload.max"), "error");
       return;
     }
-  
+
     const newImages = acceptedFiles.map((file) => {
       return Object.assign(file, {
         preview: URL.createObjectURL(file),
         imageName: file.name,
       });
     });
-  
+
     uploadImages(newImages);
   }, [images, onImageUpload, showSnackbar]);
 
@@ -44,13 +46,19 @@ const ImageUpload = ({ onImageUpload }) => {
     });
 
     try {
+      setLoading(true);
       const response = await axios.post(`${import.meta.env.VITE_SERVER_URL}/upload`, formData, {
         headers: {
           'Content-Type': 'multipart/form-data'
+        },
+        onUploadProgress: (progressEvent) => {
+          const { loaded, total } = progressEvent;
+          let percentCompleted = Math.floor((loaded * 100) / total);
+          setProgress(percentCompleted)
         }
       });
       showSnackbar(response.data.message, 'success');
-      
+
       const uploadedFiles = response.data.files;
       const uploadedImages = uploadedFiles.map(file => ({
         preview: file.url,
@@ -59,13 +67,16 @@ const ImageUpload = ({ onImageUpload }) => {
       setImages(uploadedImages);
       onImageUpload(uploadedImages);
     } catch (error) {
-      if(error?.data){
+      if (error?.data) {
         showSnackbar(error.data.message, 'error');
       }else {
         showSnackbar(t("error.server_connection"), 'error')
       }
       console.error('Error uploading images:', error);
     }
+    finally {
+      setLoading(false);
+    }
   };
 
   const deleteImage = async (filename) => {
@@ -86,7 +97,7 @@ const ImageUpload = ({ onImageUpload }) => {
       console.error('Error deleting image:', error);
     }
   };
-  
+
   const handleRemoveImage = (index) => {
     const imageToRemove = images[index];
     deleteImage(imageToRemove.filename);
@@ -122,7 +133,17 @@ const ImageUpload = ({ onImageUpload }) => {
         {isDragActive ? (
           <Typography sx={{fontSize: "14px", color: "rgb(117, 117, 117)" }}>{t("configuration.image_upload.file_drop")}</Typography>
         ) : (
-          <Typography sx={{fontSize: "14px", color: "rgb(117, 117, 117)" }}>{t("configuration.image_upload.description")}</Typography>
+          loading ?
+            progress > 0 && progress < 100 ? (
+              <div>
+                <progress value={progress} max={100} />
+                <p>{progress}%</p>
+              </div>
+            ) : (
+              <div className="loading">Loading...</div>
+            )
+            :
+            <Typography sx={{fontSize: "14px", color: "rgb(117, 117, 117)" }}>{t("configuration.image_upload.description")}</Typography>
         )}
       </Box>
       <Box display="flex" flexWrap="wrap" gap="1rem">