fix(bot): 🐛 Files upload progress bar not sequential

packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/FileUploadForm.tsx

@@ -24,7 +24,7 @@ export const FileUploadForm = ({
   const { resultId } = useAnswers()
   const [selectedFiles, setSelectedFiles] = useState<File[]>([])
   const [isUploading, setIsUploading] = useState(false)
-  const [uploadProgressPercent, setUploadProgressPercent] = useState(10)
+  const [uploadProgressPercent, setUploadProgressPercent] = useState(0)
   const [isDraggingOver, setIsDraggingOver] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string>()
 
@@ -85,6 +85,8 @@ export const FileUploadForm = ({
       })),
       onUploadProgress: setUploadProgressPercent,
     })
+    setIsUploading(false)
+    setUploadProgressPercent(0)
     if (urls.length !== files.length)
       return setErrorMessage('An error occured while uploading the files')
     onSubmit({
@@ -121,7 +123,7 @@ export const FileUploadForm = ({
         onDragLeave={handleDragLeave}
         onDrop={handleDropFile}
       >
-        {isUploading && uploadProgressPercent ? (
+        {isUploading ? (
           <>
             {selectedFiles.length === 1 ? (
               <Spinner />
@@ -130,7 +132,9 @@ export const FileUploadForm = ({
                 <div
                   className="upload-progress-bar h-2.5 rounded-full"
                   style={{
-                    width: `${uploadProgressPercent}%`,
+                    width: `${
+                      uploadProgressPercent > 0 ? uploadProgressPercent : 10
+                    }%`,
                     transition: 'width 150ms cubic-bezier(0.4, 0, 0.2, 1)',
                   }}
                 />

packages/utils/src/utils.ts

@@ -207,7 +207,11 @@ export const uploadFiles = async ({
   files,
   onUploadProgress,
 }: UploadFileProps): Promise<UrlList> => {
-  const requests = files.map(async ({ file, path }) => {
+  const urls = []
+  let i = 0
+  for (const { file, path } of files) {
+    onUploadProgress && onUploadProgress((i / files.length) * 100)
+    i += 1
     const { data } = await sendRequest<{
       presignedUrl: { url: string; fields: any }
     }>(
@@ -216,7 +220,7 @@ export const uploadFiles = async ({
       )}&fileType=${file.type}`
     )
 
-    if (!data?.presignedUrl) return null
+    if (!data?.presignedUrl) continue
 
     const { url, fields } = data.presignedUrl
     const formData = new FormData()
@@ -228,18 +232,9 @@ export const uploadFiles = async ({
       body: formData,
     })
 
-    if (!upload.ok) return
+    if (!upload.ok) continue
 
-    return `${url.split('?')[0]}/${path}`
-  })
-  const urls = []
-  let i = 0
-  for (const request of requests) {
-    i += 1
-    const url = await request
-    onUploadProgress && onUploadProgress((i / requests.length) * 100)
-    if (!url) continue
-    urls.push(url)
+    urls.push(`${url.split('?')[0]}/${path}`)
   }
   return urls
 }