Fix upload error file style, close #4810

components/upload/index.tsx

@@ -185,7 +185,10 @@ export default class Upload extends React.Component<UploadProps, any> {
     targetItem.error = error;
     targetItem.response = response;
     targetItem.status = 'error';
-    this.handleRemove(targetItem);
+    this.onChange({
+      file: targetItem,
+      fileList,
+    });
   }
 
   handleRemove(file) {

components/upload/interface.tsx

@@ -16,6 +16,8 @@ export interface File {
   percent?: number;
   thumbUrl?: string;
   originFileObj?: File;
+  response?: string;
+  error?: any;
 }
 
 export interface UploadChangeParam {

components/upload/style/index.less

@@ -60,7 +60,7 @@
     position: relative;
 
     &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
-      border: 2px dashed@primary-5;
+      border: 2px dashed @primary-5;
     }
 
     &.@{upload-prefix-cls}-disabled {
@@ -158,6 +158,7 @@
 
     &-error .@{iconfont-css-prefix}-cross {
       opacity: 1;
+      color: @error-color!important;
     }
 
     &-progress {
@@ -182,6 +183,9 @@
       &:hover {
         background: transparent;
       }
+      &-error {
+        border-color: @error-color;
+      }
     }
 
     .@{upload-item}-info {

components/upload/style/index.tsx

@@ -3,3 +3,4 @@ import './index.less';
 
 // style dependencies
 import '../../progress/style';
+import '../../tooltip/style';

components/upload/uploadList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Animate from 'rc-animate';
 import Icon from '../icon';
+import Tooltip from '../tooltip';
 import Progress from '../progress';
 import classNames from 'classnames';
 import { UploadListProps } from './interface';
@@ -147,7 +148,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
         ? <span className={`${prefixCls}-list-item-actions`}>{previewIcon}{removeIcon}</span>
         : removeIconCross;
 
-      return (
+      const item = (
         <div className={infoUploadingClass} key={file.uid}>
           <div className={`${prefixCls}-list-item-info`}>
             {icon}
@@ -157,6 +158,17 @@ export default class UploadList extends React.Component<UploadListProps, any> {
           {progress}
         </div>
       );
+
+      if (file.status === 'error') {
+        const message = file.response || (file.error && file.error.statusText) || 'Upload Error';
+        return (
+          <Tooltip title={message} key={file.uid}>
+            {item}
+          </Tooltip>
+        );
+      }
+
+      return item;
     });
     const listClassNames = classNames({
       [`${prefixCls}-list`]: true,