From 8236f8fed895755bca27e3ce563c0455b3b22706 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 19 Sep 2024 17:08:02 +0800
Subject: [PATCH] fix: file uploader

---
 .../components/base/file-uploader/hooks.ts    | 37 ++++++++++++-------
 .../components/base/file-uploader/store.tsx   |  2 -
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/web/app/components/base/file-uploader/hooks.ts b/web/app/components/base/file-uploader/hooks.ts
index 3ef20f1668..c3caf5c9ee 100644
--- a/web/app/components/base/file-uploader/hooks.ts
+++ b/web/app/components/base/file-uploader/hooks.ts
@@ -26,7 +26,19 @@ export const useFile = (fileConfig: FileUpload) => {
   const fileStore = useFileStore()
   const params = useParams()
 
-  const handleAddOrUpdateFiles = useCallback((newFile: FileEntity) => {
+  const handleAddFile = useCallback((newFile: FileEntity) => {
+    const {
+      files,
+      setFiles,
+    } = fileStore.getState()
+
+    const newFiles = produce(files, (draft) => {
+      draft.push(newFile)
+    })
+    setFiles(newFiles)
+  }, [fileStore])
+
+  const handleUpdateFile = useCallback((newFile: FileEntity) => {
     const {
       files,
       setFiles,
@@ -37,8 +49,6 @@ export const useFile = (fileConfig: FileUpload) => {
 
       if (index > -1)
         draft[index] = newFile
-      else
-        draft.push(newFile)
     })
     setFiles(newFiles)
   }, [fileStore])
@@ -69,18 +79,18 @@ export const useFile = (fileConfig: FileUpload) => {
       fileUpload({
         file: uploadingFile.file!,
         onProgressCallback: (progress) => {
-          handleAddOrUpdateFiles({ ...uploadingFile, progress })
+          handleUpdateFile({ ...uploadingFile, progress })
         },
         onSuccessCallback: (res) => {
-          handleAddOrUpdateFiles({ ...uploadingFile, fileId: res.id, progress: 100 })
+          handleUpdateFile({ ...uploadingFile, fileId: res.id, progress: 100 })
         },
         onErrorCallback: () => {
           notify({ type: 'error', message: t('common.imageUploader.uploadFromComputerUploadError') })
-          handleAddOrUpdateFiles({ ...uploadingFile, progress: -1 })
+          handleUpdateFile({ ...uploadingFile, progress: -1 })
         },
       }, !!params.token)
     }
-  }, [fileStore, notify, t, handleAddOrUpdateFiles, params])
+  }, [fileStore, notify, t, handleUpdateFile, params])
 
   const handleLoadFileFromLink = useCallback(() => {}, [])
 
@@ -117,18 +127,18 @@ export const useFile = (fileConfig: FileUpload) => {
           fileType: isCustomFileType ? SupportUploadFileTypes.custom : getFileType(file),
           type: TransferMethod.local_file,
         }
-        handleAddOrUpdateFiles(uploadingFile)
+        handleAddFile(uploadingFile)
         fileUpload({
           file: uploadingFile.file,
           onProgressCallback: (progress) => {
-            handleAddOrUpdateFiles({ ...uploadingFile, progress })
+            handleUpdateFile({ ...uploadingFile, progress })
           },
           onSuccessCallback: (res) => {
-            handleAddOrUpdateFiles({ ...uploadingFile, fileStorageId: res.id, progress: 100 })
+            handleUpdateFile({ ...uploadingFile, fileStorageId: res.id, progress: 100 })
           },
           onErrorCallback: () => {
             notify({ type: 'error', message: t('common.fileUploader.uploadFromComputerUploadError') })
-            handleAddOrUpdateFiles({ ...uploadingFile, progress: -1 })
+            handleUpdateFile({ ...uploadingFile, progress: -1 })
           },
         }, !!params.token)
       },
@@ -142,7 +152,7 @@ export const useFile = (fileConfig: FileUpload) => {
       false,
     )
     reader.readAsDataURL(file)
-  }, [notify, t, handleAddOrUpdateFiles, params.token, fileConfig?.allowed_file_types])
+  }, [notify, t, handleAddFile, handleUpdateFile, params.token, fileConfig?.allowed_file_types])
 
   const handleClipboardPasteFile = useCallback((e: ClipboardEvent<HTMLTextAreaElement>) => {
     const file = e.clipboardData?.files[0]
@@ -182,7 +192,8 @@ export const useFile = (fileConfig: FileUpload) => {
   }, [handleLocalFileUpload])
 
   return {
-    handleAddOrUpdateFiles,
+    handleAddFile,
+    handleUpdateFile,
     handleRemoveFile,
     handleReUploadFile,
     handleLoadFileFromLink,
diff --git a/web/app/components/base/file-uploader/store.tsx b/web/app/components/base/file-uploader/store.tsx
index 043dc8bce6..fb38563b04 100644
--- a/web/app/components/base/file-uploader/store.tsx
+++ b/web/app/components/base/file-uploader/store.tsx
@@ -43,8 +43,6 @@ export const useFileStore = () => {
 
 type FileProviderProps = {
   children: React.ReactNode
-  isPublicAPI?: boolean
-  url?: string
   onChange?: (files: FileEntity[]) => void
 }
 export const FileContextProvider = ({