fix: fix the upload status not being updated if the upload was

successful
nocobase · Jun 27, 2023 · 9d57306 · 9d57306
1 parent ea674ab
commit 9d57306
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/packages/core/client/src/schema-component/antd/upload/Upload.tsx b/packages/core/client/src/schema-component/antd/upload/Upload.tsx
@@ -1,10 +1,10 @@
 import { DeleteOutlined, DownloadOutlined, InboxOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import { usePrefixCls } from '@formily/antd/esm/__builtins__';
 import { connect, mapProps, mapReadPretty } from '@formily/react';
-import { Upload as AntdUpload, Button, Progress, Space } from 'antd';
+import { Upload as AntdUpload, Button, Progress, Space, UploadFile } from 'antd';
 import cls from 'classnames';
 import { saveAs } from 'file-saver';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
@@ -31,9 +31,12 @@ Upload.Attachment = connect((props: UploadProps) => {
   const [photoIndex, setPhotoIndex] = useState(0);
   const [visible, setVisible] = useState(false);
   const { t } = useTranslation();
+  const internalFileList = useRef([]);
   useEffect(() => {
     if (sync) {
-      setFileList(toFileList(value));
+      const fileList = toFileList(value);
+      setFileList(fileList);
+      internalFileList.current = fileList;
     }
   }, [value, sync]);
   const uploadProps = useUploadProps({ ...props });
@@ -105,6 +108,9 @@ Upload.Attachment = connect((props: UploadProps) => {
                               }
                               const index = prevFileList.indexOf(file);
                               prevFileList.splice(index, 1);
+                              internalFileList.current = internalFileList.current.filter(
+                                (item) => item.uid !== file.uid,
+                              );
                               onChange(toValue([...prevFileList]));
                               return [...prevFileList];
                             });
@@ -131,12 +137,17 @@ Upload.Attachment = connect((props: UploadProps) => {
                 listType={'picture-card'}
                 fileList={fileList}
                 onChange={(info) => {
+                  // info.fileList 有 BUG，会导致上传状态一直是 uploading
+                  // 所以这里仿照 antd 源码，自己维护一个 fileList
+                  const list = updateFileList(info.file, internalFileList.current);
+                  internalFileList.current = list;
+
                   setSync(false);
                   if (multiple) {
                     if (info.file.status === 'done') {
-                      onChange(toValue(info.fileList));
+                      onChange(toValue(list));
                     }
-                    setFileList(info.fileList.map(toItem));
+                    setFileList(list.map(toItem));
                   } else {
                     if (info.file.status === 'done') {
                       // TODO(BUG): object 的联动有问题，不响应，折中的办法先置空再赋值
@@ -247,3 +258,14 @@ Upload.DraggerV2 = connect(
 );
 
 export default Upload;
+
+export function updateFileList(file: UploadFile, fileList: (UploadFile | Readonly<UploadFile>)[]) {
+  const nextFileList = [...fileList];
+  const fileIndex = nextFileList.findIndex(({ uid }) => uid === file.uid);
+  if (fileIndex === -1) {
+    nextFileList.push(file);
+  } else {
+    nextFileList[fileIndex] = file;
+  }
+  return nextFileList;
+}
diff --git a/packages/core/client/src/schema-component/antd/upload/shared.ts b/packages/core/client/src/schema-component/antd/upload/shared.ts
@@ -208,7 +208,10 @@ export function useUploadProps<T extends IUploadProps = UploadProps>({ serviceEr
 
 export const toItem = (file) => {
   if (file?.response?.data) {
-    file = file.response.data;
+    file = {
+      uid: file.uid,
+      ...file.response.data,
+    };
   }
   return {
     ...file,