fix: Upload item removed should keep status className (ant-design#36439)

* fix: Upload item removed should keep status className

* add test case

* test: fix act warning

* revert act test

* test: update snapshot

components/upload/Upload.tsx

@@ -262,15 +262,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
       const removedFileList = removeFileItem(file, mergedFileList);
 
       if (removedFileList) {
-        currentFile = { ...file, status: 'removed' };
-        mergedFileList?.forEach(item => {
-          const matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
-          if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
-            item.status = 'removed';
-          }
-        });
+        currentFile = { ...file };
         upload.current?.abort(currentFile);
-
         onInternalChange(currentFile, removedFileList);
       }
     });

components/upload/__tests__/__snapshots__/uploadlist.test.js.snap

@@ -118,7 +118,7 @@ exports[`Upload List itemRender 1`] = `
       class="custom-item-render"
     >
       <span>
-        uid:-1 name: xxx.png status: removed url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png  1/2
+        uid:-1 name: xxx.png status: done url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png  1/2
       </span>
       <span
         class="custom-item-render-action-remove"
@@ -144,7 +144,7 @@ exports[`Upload List itemRender 1`] = `
       class="custom-item-render"
     >
       <span>
-        uid:-2 name: yyy.png status: removed url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png  2/2
+        uid:-2 name: yyy.png status: done url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png  2/2
       </span>
       <span
         class="custom-item-render-action-remove"

components/upload/__tests__/upload.test.js

@@ -505,6 +505,9 @@ describe('Upload', () => {
       <Upload fileList={[file]} onChange={onChange} onRemove={onRemove} />,
     );
     fireEvent.click(container.querySelector('div.ant-upload-list-item .anticon-delete'));
+    expect(container.querySelector('.ant-upload-list-item').className).toContain(
+      'ant-upload-list-item-uploading',
+    );
 
     // uploadStart is a batch work which we need wait for react act
     await act(async () => {
@@ -517,8 +520,13 @@ describe('Upload', () => {
       await removePromise(true);
     });
 
+    // https://github.com/ant-design/ant-design/issues/36286
+    expect(container.querySelector('.ant-upload-list-item').className).toContain(
+      'ant-upload-list-item-uploading',
+    );
+
     expect(onChange).toHaveBeenCalled();
-    expect(file.status).toBe('removed');
+    expect(file.status).toBe('uploading');
   });
 
   it('should not stop download when return use onDownload', done => {

components/upload/index.en-US.md

@@ -57,7 +57,7 @@ Extends File with additional props.
 | crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 |
 | name | File name | string | - | - |
 | percent | Upload progress percent | number | - | - |
-| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
+| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` | - | - |
 | thumbUrl | Thumb image url | string | - | - |
 | uid | unique id. Will auto generate when not provided | string | - | - |
 | url | Download url | string | - | - |
@@ -82,7 +82,7 @@ When uploading state change, it returns:
    {
       uid: 'uid',      // unique identifier, negative is recommend, to prevent interference with internal generated id
       name: 'xx.png',   // file name
-      status: 'done', // options：uploading, done, error, removed. Intercepted file by beforeUpload don't have status field.
+      status: 'done', // options：uploading, done, error. Intercepted file by beforeUpload don't have status field.
       response: '{"status": "success"}', // response from server
       linkProps: '{"download": "image"}', // additional html props of file link
       xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header

components/upload/index.zh-CN.md

@@ -58,7 +58,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
 | crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 |
 | name | 文件名 | string | - | - |
 | percent | 上传进度 | number | - | - |
-| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
+| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` | - | - |
 | thumbUrl | 缩略图地址 | string | - | - |
 | uid | 唯一标识符，不设置时会自动生成 | string | - | - |
 | url | 下载地址 | string | - | - |
@@ -83,7 +83,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
    {
       uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
       name: 'xx.png'   // 文件名
-      status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
+      status: 'done', // 状态有：uploading done error，beforeUpload 拦截的文件没有 status 属性
       response: '{"status": "success"}', // 服务端响应内容
       linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
    }

components/upload/interface.tsx

@@ -10,7 +10,7 @@ export interface RcFile extends OriRcFile {
   readonly lastModifiedDate: Date;
 }
 
-export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
+export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading';
 
 export interface HttpRequestHeader {
   [key: string]: string;