feat: upload should not be aborted until handleRemove is resolved

components/upload/Upload.tsx

@@ -158,11 +158,31 @@ class Upload extends React.Component<UploadProps, UploadState> {
     });
   };
 
-  handleManualRemove = (file: UploadFile) => {
-    if (this.upload) {
-      this.upload.abort(file);
-    }
-    this.handleRemove(file);
+  handleRemove = (file: UploadFile) => {
+    const { onRemove } = this.props;
+    const { fileList } = this.state;
+
+    Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
+      // Prevent removing file
+      if (ret === false) {
+        return;
+      }
+
+      const removedFileList = removeFileItem(file, fileList);
+
+      if (removedFileList) {
+        file.status = 'removed'; // eslint-disable-line
+
+        if (this.upload) {
+          this.upload.abort(file);
+        }
+
+        this.onChange({
+          file,
+          fileList: removedFileList,
+        });
+      }
+    });
   };
 
   onChange = (info: UploadChangeParam) => {
@@ -205,30 +225,6 @@ class Upload extends React.Component<UploadProps, UploadState> {
     return true;
   };
 
-  handleRemove(file: UploadFile) {
-    const { onRemove } = this.props;
-    const { fileList } = this.state;
-    const { status } = file;
-
-    file.status = 'removed'; // eslint-disable-line
-
-    Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(ret => {
-      // Prevent removing file
-      if (ret === false) {
-        file.status = status;
-        return;
-      }
-
-      const removedFileList = removeFileItem(file, fileList);
-      if (removedFileList) {
-        this.onChange({
-          file,
-          fileList: removedFileList,
-        });
-      }
-    });
-  }
-
   clearProgressTimer() {
     clearInterval(this.progressTimer);
   }
@@ -267,7 +263,7 @@ class Upload extends React.Component<UploadProps, UploadState> {
         previewFile={previewFile}
         onPreview={onPreview}
         onDownload={onDownload}
-        onRemove={this.handleManualRemove}
+        onRemove={this.handleRemove}
         showRemoveIcon={!disabled && showRemoveIcon}
         showPreviewIcon={showPreviewIcon}
         showDownloadIcon={showDownloadIcon}

components/upload/__tests__/upload.test.js

@@ -429,6 +429,42 @@ describe('Upload', () => {
     });
   });
 
+  // https://github.com/ant-design/ant-design/issues/18902
+  it('should not abort uploading until return value of onRemove is resolved as true', done => {
+    let wrapper;
+
+    const props = {
+      onRemove: () =>
+        new Promise(
+          resolve =>
+            setTimeout(() => {
+              wrapper.update();
+              expect(props.fileList).toHaveLength(1);
+              expect(props.fileList[0].status).toBe('uploading');
+              resolve(true);
+            }),
+          100,
+        ),
+      fileList: [
+        {
+          uid: '-1',
+          name: 'foo.png',
+          status: 'uploading',
+          url: 'http://www.baidu.com/xxx.png',
+        },
+      ],
+      onChange: () => {
+        expect(props.fileList).toHaveLength(1);
+        expect(props.fileList[0].status).toBe('removed');
+        done();
+      },
+    };
+
+    wrapper = mount(<Upload {...props} />);
+
+    wrapper.find('div.ant-upload-list-item i.anticon-delete').simulate('click');
+  });
+
   it('should not stop download when return use onDownload', done => {
     const mockRemove = jest.fn(() => false);
     const props = {