progressbar uploading

src/pages/editor/components/SettingsPanel.tsx

@@ -72,7 +72,7 @@ const SettingsPanel = () => {
     if (!file) return
 
     try {
-      const result = await uploadFile(file)
+      const result = await uploadFile({ file })
       const imageUrl = result?.data?.url
       if (!imageUrl) return
 

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

src/pages/uploader/hooks/useUploaderData.ts

@@ -1,9 +1,15 @@
 import { useMutation } from "@tanstack/react-query";
 import * as api from "../service/UploaderService";
 
+export type SingleUploadParams = {
+  file: File;
+  onProgress?: (progress: number) => void;
+};
+
 export const useSingleUpload = () => {
   return useMutation({
-    mutationFn: api.singleUpload,
+    mutationFn: ({ file, onProgress }: SingleUploadParams) =>
+      api.singleUpload(file, onProgress),
   });
 };
 

src/pages/uploader/service/UploaderService.ts

@@ -5,13 +5,21 @@ import type {
 } from "../types/Types";
 
 export const singleUpload = async (
-  file: File
+  file: File,
+  onProgress?: (progress: number) => void
 ): Promise<SingleUploadResponse> => {
   const formData = new FormData();
   formData.append("file", file);
   const { data } = await axios.post<SingleUploadResponse>(
     `/admin/single-file`,
-    formData
+    formData,
+    {
+      onUploadProgress: (event) => {
+        if (event.total) {
+          onProgress?.(Math.round((event.loaded / event.total) * 100));
+        }
+      },
+    }
   );
   return data;
 };