From 626ebf2063c15e151292b9a9dc5b42719f5226df Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 11 Feb 2018 16:11:13 +0800
Subject: [PATCH] Fix upload list update logic when beforeUpload return false

close #8020 #8779 #9248 #9191

ref #8036
---
 components/upload/Upload.tsx                   |  9 +++++----
 components/upload/UploadList.tsx               | 10 ++++------
 components/upload/__tests__/uploadlist.test.js |  6 +++---
 components/upload/style/index.less             |  8 ++++++++
 package.json                                   |  1 +
 typings/custom-typings.d.ts                    |  2 ++
 6 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index ea0e2047e984..385881b0971b 100644
--- a/components/upload/Upload.tsx
+++ b/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;
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
index 963d695a6907..df69927a0df3 100644
--- a/components/upload/UploadList.tsx
+++ b/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') {
-            icon = <div className={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>;
-          } else {
-            icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
-          }
+        if (listType === 'picture-card' && file.status === 'uploading') {
+          icon = <div className={`${prefixCls}-list-item-uploading-text`}>{locale.uploading}</div>;
+        } else if (!file.thumbUrl && !file.url) {
+          icon = <Icon className={`${prefixCls}-list-item-thumbnail`} type="picture" />;
         } else {
           icon = (
             <a
diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js
index 62d087d475ba..af439b039846 100644
--- a/components/upload/__tests__/uploadlist.test.js
+++ b/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
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index 0b96dc8220a7..00298f76647e 100644
--- a/components/upload/style/index.less
+++ b/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;
diff --git a/package.json b/package.json
index 0663e1f5fbc6..1aaf018ec998 100755
--- a/package.json
+++ b/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",
diff --git a/typings/custom-typings.d.ts b/typings/custom-typings.d.ts
index 5f7479b6558f..ad7d69f960a3 100644
--- a/typings/custom-typings.d.ts
+++ b/typings/custom-typings.d.ts
@@ -95,3 +95,5 @@ declare module "*.json" {
 declare module "prop-types"
 
 declare module "lodash.debounce"
+
+declare module "lodash.uniqby"