progressbar uploading

src/pages/editor/components/sidebar/instructions/ImageGallery.tsx

@@ -10,14 +10,23 @@ const ImageGallery: FC = () => {
     const { gallery, addGalleryItem, removeGalleryItem } = useEditorStore();
     const { mutateAsync: uploadFile } = useSingleUpload();
     const [isUploading, setIsUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState(0);
 
     const handleFileChange = async (files: File[]) => {
         if (files.length === 0) return;
 
         setIsUploading(true);
+        setUploadProgress(0);
         try {
-            for (const file of files) {
-                const result = await uploadFile(file);
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                const result = await uploadFile({
+                    file,
+                    onProgress: (fileProgress) => {
+                        const overall = Math.round(((i + fileProgress / 100) / files.length) * 100);
+                        setUploadProgress(overall);
+                    },
+                });
                 const imageUrl = result?.data?.url;
                 if (!imageUrl) continue;
 
@@ -33,6 +42,7 @@ const ImageGallery: FC = () => {
             // TODO: show error toast
         } finally {
             setIsUploading(false);
+            setUploadProgress(0);
         }
     };
 
@@ -54,6 +64,7 @@ const ImageGallery: FC = () => {
                 isMultiple={true}
                 hidePreview
                 isLoading={isUploading}
+                uploadProgress={isUploading ? uploadProgress : undefined}
             />
 
             {gallery.length === 0 && !isUploading && (