Fix upload list update logic when beforeUpload return false

close #8020 #8779 #9248 #9191

ref #8036

components/upload/Upload.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import RcUpload from 'rc-upload';
 import classNames from 'classnames';
+import uniqBy from 'lodash.uniqby';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
 import Dragger from './Dragger';
@@ -153,8 +154,8 @@ export default class Upload extends React.Component<UploadProps, UploadState> {
     this.handleRemove(file);
   }
 
-  onChange = (info: UploadChangeParam, updateState = true) => {
-    if (!('fileList' in this.props) && updateState) {
+  onChange = (info: UploadChangeParam) => {
+    if (!('fileList' in this.props)) {
       this.setState({ fileList: info.fileList });
     }
 
@@ -186,8 +187,8 @@ export default class Upload extends React.Component<UploadProps, UploadState> {
     if (result === false) {
       this.onChange({
         file,
-        fileList,
-      }, false);
+        fileList: uniqBy(fileList.concat(this.state.fileList), (item: any) => item.uid),
+      });
       return false;
     } else if (result && (result as PromiseLike<any>).then) {
       return result;

components/upload/UploadList.tsx

@@ -72,12 +72,10 @@ export default class UploadList extends React.Component<UploadListProps, any> {
       let icon = <Icon type={file.status === 'uploading' ? 'loading' : 'paper-clip'} />;
 
       if (listType === 'picture' || listType === 'picture-card') {
-        if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
-          if (listType === 'picture-card') {
+        if (listType === 'picture-card' && file.status === 'uploading') {
           icon = <div className={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>;
-          } else {
+        } else if (!file.thumbUrl && !file.url) {
           icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
-          }
         } else {
           icon = (
             <a

components/upload/__tests__/uploadlist.test.js

@@ -118,7 +118,7 @@ describe('Upload List', () => {
     });
   });
 
-  it('does not change filelist when beforeUpload returns false', () => {
+  it('does concat filelist when beforeUpload returns false', () => {
     const handleChange = jest.fn();
     const wrapper = mount(
       <Upload
@@ -139,8 +139,8 @@ describe('Upload List', () => {
       },
     });
 
-    expect(wrapper.state().fileList).toBe(fileList);
-    expect(handleChange.mock.calls[0][0].fileList).toHaveLength(1);
+    expect(wrapper.state().fileList.length).toBe(fileList.length + 1);
+    expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3);
   });
 
   // https://github.com/ant-design/ant-design/issues/7762

components/upload/style/index.less

@@ -353,9 +353,17 @@
     }
 
     .@{upload-item}-name {
+      margin: 8px 0 0;
+      padding: 0;
+      text-align: center;
+      line-height: @line-height-base;
       display: none;
     }
 
+    .anticon-picture + .@{upload-item}-name {
+      display: block;
+    }
+
     .@{upload-item}-uploading {
       &.@{upload-item} {
         background-color: @background-color-light;

package.json

@@ -47,6 +47,7 @@
     "dom-closest": "^0.2.0",
     "enquire.js": "^2.1.1",
     "lodash.debounce": "^4.0.8",
+    "lodash.uniqby": "^4.7.0",
     "moment": "^2.19.3",
     "omit.js": "^1.0.0",
     "prop-types": "^15.5.7",

typings/custom-typings.d.ts

@@ -95,3 +95,5 @@ declare module "*.json" {
 declare module "prop-types"
 
 declare module "lodash.debounce"
+
+declare module "lodash.uniqby"