progressbar uploading

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

@@ -28,7 +28,7 @@ const AudioInput: FC = () => {
             try {
                 for (const file of acceptedFiles) {
                     try {
-                        const result = await uploadFile(file);
+                        const result = await uploadFile({ file });
                         const audioUrl = result?.data?.url;
                         if (!audioUrl) continue;
                         const audioId = `audio-${Date.now()}-${Math.random()}`;

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 && (

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

@@ -10,16 +10,27 @@ const VideoInput: FC = () => {
         useEditorStore();
     const { mutateAsync: uploadFile } = useSingleUpload();
     const [isUploading, setIsUploading] = useState(false);
+    const [uploadProgress, setUploadProgress] = useState(0);
 
     const onDrop = useCallback(
         async (acceptedFiles: File[]) => {
             if (acceptedFiles.length === 0) return;
 
             setIsUploading(true);
+            setUploadProgress(0);
             try {
-                for (const file of acceptedFiles) {
+                for (let i = 0; i < acceptedFiles.length; i++) {
+                    const file = acceptedFiles[i];
                     try {
-                        const result = await uploadFile(file);
+                        const result = await uploadFile({
+                            file,
+                            onProgress: (fileProgress) => {
+                                const overall = Math.round(
+                                    ((i + fileProgress / 100) / acceptedFiles.length) * 100
+                                );
+                                setUploadProgress(overall);
+                            },
+                        });
                         const videoUrl = result?.data?.url;
                         if (!videoUrl) continue;
                         const videoId = `video-${Date.now()}-${Math.random()}`;
@@ -41,6 +52,7 @@ const VideoInput: FC = () => {
                 }
             } finally {
                 setIsUploading(false);
+                setUploadProgress(0);
             }
         },
         [addObject, setSelectedObjectId, setTool, uploadFile]
@@ -71,6 +83,7 @@ const VideoInput: FC = () => {
                 getRootProps={getRootProps}
                 getInputProps={getInputProps}
                 isLoading={isUploading}
+                uploadProgress={isUploading ? uploadProgress : undefined}
             />
 
             {videoObjects.length > 0 && (