From 81ff3741a23753a1e147081277077a9a16055d09 Mon Sep 17 00:00:00 2001
From: Junyi <mytharcher@users.noreply.github.com>
Date: Wed, 19 Feb 2025 23:10:00 +0800
Subject: [PATCH] fix(client): fix uploaded files missing (#6247)

* fix(client): fix uploaded files missing

* fix(client): test case
---
 .../schema-component/antd/upload/Upload.tsx   | 36 +++++++++++++------
 .../antd/upload/__tests__/upload.test.tsx     |  2 +-
 2 files changed, 27 insertions(+), 11 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
index 23c9242861..d8d81d8f50 100644
--- a/packages/core/client/src/schema-component/antd/upload/Upload.tsx
+++ b/packages/core/client/src/schema-component/antd/upload/Upload.tsx
@@ -356,6 +356,7 @@ export function AttachmentList(props) {
 
 export function Uploader({ rules, ...props }: UploadProps) {
   const { disabled, multiple, value, onChange, toValueItem = toValueItemDefault } = props;
+  const [uploadedList, setUploadedList] = useState<any[]>([]);
   const [pendingList, setPendingList] = useState<any[]>([]);
   const { t } = useTranslation();
   const { componentCls: prefixCls } = useStyles();
@@ -379,28 +380,32 @@ export function Uploader({ rules, ...props }: UploadProps) {
 
   const onUploadChange = useCallback(
     (info) => {
+      const pendingFiles = info.fileList.filter((file) => file.status !== 'done').map(normalizeFile);
+      setPendingList(pendingFiles);
       if (multiple) {
-        const uploadedList = info.fileList.filter((file) => file.status === 'done');
-        if (uploadedList.length) {
-          const valueList = [...(value ?? []), ...uploadedList.map((v) => toValueItem(v.response?.data))];
-          onChange?.(valueList);
+        const uploaded = info.fileList.filter((file) => file.status === 'done');
+        if (uploaded.length) {
+          const valueList = [...uploadedList, ...uploaded.map((v) => toValueItem(v.response?.data))];
+          if (pendingFiles.length) {
+            setUploadedList(valueList);
+          } else {
+            setUploadedList([]);
+            onChange?.(valueList);
+          }
         }
-        setPendingList(info.fileList.filter((file) => file.status !== 'done').map(normalizeFile));
       } else {
         // NOTE: 用 fileList 里的才有附加的验证状态信息，file 没有（不清楚为何）
         const file = info.fileList.find((f) => f.uid === info.file.uid);
         if (file.status === 'done') {
           onChange?.(toValueItem(file.response?.data));
           setPendingList([]);
-        } else {
-          setPendingList([normalizeFile(file)]);
         }
       }
     },
-    [value, multiple, onChange],
+    [multiple, uploadedList, toValueItem, onChange],
   );
 
-  const onDelete = useCallback((file) => {
+  const onDeletePending = useCallback((file) => {
     setPendingList((prevPendingList) => {
       const index = prevPendingList.indexOf(file);
       prevPendingList.splice(index, 1);
@@ -408,6 +413,14 @@ export function Uploader({ rules, ...props }: UploadProps) {
     });
   }, []);
 
+  const onDeleteUploaded = useCallback((file) => {
+    setUploadedList((prevUploadedList) => {
+      const index = prevUploadedList.indexOf(file);
+      prevUploadedList.splice(index, 1);
+      return [...prevUploadedList];
+    });
+  }, []);
+
   const QRCodeUploader = useComponent('QRCodeUploader');
 
   const { mimetype: accept, size } = rules ?? {};
@@ -416,8 +429,11 @@ export function Uploader({ rules, ...props }: UploadProps) {
     !disabled && (multiple || ((!value || (Array.isArray(value) && !value.length)) && !pendingList.length));
   return (
     <>
+      {uploadedList.map((file, index) => (
+        <AttachmentListItem key={file.id} file={file} index={index} disabled={disabled} onDelete={onDeleteUploaded} />
+      ))}
       {pendingList.map((file, index) => (
-        <AttachmentListItem key={file.uid} file={file} index={index} disabled={disabled} onDelete={onDelete} />
+        <AttachmentListItem key={file.uid} file={file} index={index} disabled={disabled} onDelete={onDeletePending} />
       ))}
       <div
         className={cls(`${prefixCls}-list-picture-card-container`, `${prefixCls}-list-item-container`)}
diff --git a/packages/core/client/src/schema-component/antd/upload/__tests__/upload.test.tsx b/packages/core/client/src/schema-component/antd/upload/__tests__/upload.test.tsx
index 7f8c3fca9f..f3230ade29 100644
--- a/packages/core/client/src/schema-component/antd/upload/__tests__/upload.test.tsx
+++ b/packages/core/client/src/schema-component/antd/upload/__tests__/upload.test.tsx
@@ -119,7 +119,7 @@ describe('Upload', () => {
     await userEvent.upload(document.querySelector('input[type="file"]'), file);
 
     await waitFor(() => {
-      expect(document.querySelectorAll('.ant-upload-list-item-image')).toHaveLength(2);
+      expect(document.querySelectorAll('.ant-upload-list-item-image')).toHaveLength(1);
     });
   });