diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 426139c849..bae03963ac 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -267,8 +267,15 @@ const InternalUpload: React.ForwardRefRenderFunction = (pr const removedFileList = removeFileItem(file, mergedFileList); if (removedFileList) { - currentFile = { ...file }; + 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'; + } + }); upload.current?.abort(currentFile); + onInternalChange(currentFile, removedFileList); } }); diff --git a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap index 152972c40c..620c8534d3 100644 --- a/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap +++ b/components/upload/__tests__/__snapshots__/uploadlist.test.js.snap @@ -118,7 +118,7 @@ exports[`Upload List itemRender 1`] = ` class="custom-item-render" > - uid:-1 name: xxx.png status: done url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png 1/2 + uid:-1 name: xxx.png status: removed url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png 1/2 - uid:-2 name: yyy.png status: done url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png 2/2 + uid:-2 name: yyy.png status: removed url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png 2/2 { , ); 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 () => { @@ -520,13 +517,8 @@ 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('uploading'); + expect(file.status).toBe('removed'); }); it('should not stop download when return use onDownload', done => { diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 2064e345f4..c7d5cf6bff 100644 --- a/components/upload/index.en-US.md +++ b/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` | - | - | +| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - | | 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. Intercepted file by beforeUpload don't have status field. + status: 'done', // options：uploading, done, error, removed. 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 diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index b162738573..d0ebc67d9d 100644 --- a/components/upload/index.zh-CN.md +++ b/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` | - | - | +| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - | | 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，beforeUpload 拦截的文件没有 status 属性 + status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性 response: '{"status": "success"}', // 服务端响应内容 linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性 } diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx index 02c36d8017..1b1c218085 100755 --- a/components/upload/interface.tsx +++ b/components/upload/interface.tsx @@ -10,7 +10,7 @@ export interface RcFile extends OriRcFile { readonly lastModifiedDate: Date; } -export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading'; +export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'; export interface HttpRequestHeader { [key: string]: string;