From b0010aae3293f5901f6f01fd4a0d103f603d8024 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Sat, 2 Jul 2022 17:07:48 +0200
Subject: [PATCH] =?UTF-8?q?fix(bot):=20=F0=9F=90=9B=20Files=20upload=20pro?=
 =?UTF-8?q?gress=20bar=20not=20sequential?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChatBlock/inputs/FileUploadForm.tsx       | 10 ++++++---
 packages/utils/src/utils.ts                   | 21 +++++++------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/FileUploadForm.tsx b/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/FileUploadForm.tsx
index 1590e3645..7644f8f68 100644
--- a/packages/bot-engine/src/components/ChatGroup/ChatBlock/inputs/FileUploadForm.tsx
+++ b/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)',
                   }}
                 />
diff --git a/packages/utils/src/utils.ts b/packages/utils/src/utils.ts
index 74e85d990..434cbe3b2 100644
--- a/packages/utils/src/utils.ts
+++ b/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
 }