feat: update upload

components/upload/Upload.jsx

@@ -1,10 +1,12 @@
 import classNames from 'classnames';
 import uniqBy from 'lodash/uniqBy';
+import findIndex from 'lodash/findIndex';
 import VcUpload from '../vc-upload';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, initDefaultProps, hasProp } from '../_util/props-util';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale-provider/default';
+import { ConfigConsumerProps } from '../config-provider';
 import Dragger from './Dragger';
 import UploadList from './UploadList';
 import { UploadProps } from './interface';
@@ -18,7 +20,6 @@ export default {
   inheritAttrs: false,
   Dragger: Dragger,
   props: initDefaultProps(UploadProps, {
-    prefixCls: 'ant-upload',
     type: 'select',
     multiple: false,
     action: '',
@@ -30,6 +31,9 @@ export default {
     disabled: false,
     supportServerRender: true,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   // recentUploadStatus: boolean | PromiseLike<any>;
   data() {
     this.progressTimer = null;
@@ -51,7 +55,7 @@ export default {
       const targetItem = fileToObject(file);
       targetItem.status = 'uploading';
       const nextFileList = this.sFileList.concat();
-      const fileIndex = nextFileList.findIndex(({ uid }) => uid === targetItem.uid);
+      const fileIndex = findIndex(nextFileList, ({ uid }) => uid === targetItem.uid);
       if (fileIndex === -1) {
         nextFileList.push(targetItem);
       } else {
@@ -134,9 +138,13 @@ export default {
     },
     handleRemove(file) {
       const { remove } = getOptionProps(this);
+      const { status } = file;
+      file.status = 'removed'; // eslint-disable-line
+
       Promise.resolve(typeof remove === 'function' ? remove(file) : remove).then(ret => {
         // Prevent removing file
         if (ret === false) {
+          file.status = status;
           return;
         }
 
@@ -150,8 +158,9 @@ export default {
       });
     },
     handleManualRemove(file) {
+      if(this.$refs.uploadRef) {
         this.$refs.uploadRef.abort(file);
-      file.status = 'removed'; // eslint-disable-line
+      }
       this.handleRemove(file);
     },
     onChange(info) {
@@ -176,7 +185,8 @@ export default {
           fileList: uniqBy(this.sFileList.concat(fileList.map(fileToObject)), item => item.uid),
         });
         return false;
-      } else if (result && result.then) {
+      }
+      if (result && result.then) {
         return result;
       }
       return true;
@@ -206,7 +216,10 @@ export default {
     },
   },
   render() {
-    const { prefixCls = '', showUploadList, listType, type, disabled } = getOptionProps(this);
+    const { prefixCls: customizePrefixCls, showUploadList, listType, type, disabled } = getOptionProps(this);
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('upload', customizePrefixCls);
 
     const vcUploadProps = {
       props: {
@@ -264,8 +277,15 @@ export default {
       [`${prefixCls}-select-${listType}`]: true,
       [`${prefixCls}-disabled`]: disabled,
     });
+
+    // Remove id to avoid open by label when trigger is hidden
+    // https://github.com/ant-design/ant-design/issues/14298
+    if (!children) {
+      delete vcUploadProps.props.id;
+    }
+
     const uploadButton = (
-      <div class={uploadButtonCls} style={{ display: children ? '' : 'none' }}>
+      <div class={uploadButtonCls} style={children ? undefined : { display: 'none' }}>
         <VcUpload {...vcUploadProps}>{children}</VcUpload>
       </div>
     );

components/upload/UploadList.jsx

@@ -1,13 +1,14 @@
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, initDefaultProps } from '../_util/props-util';
 import getTransitionProps from '../_util/getTransitionProps';
+import { ConfigConsumerProps } from '../config-provider';
 import Icon from '../icon';
 import Tooltip from '../tooltip';
 import Progress from '../progress';
 import classNames from 'classnames';
 import { UploadListProps } from './interface';
 
-const imageTypes = ['image', 'webp', 'png', 'svg', 'gif', 'jpg', 'jpeg', 'bmp'];
+const imageTypes = ['image', 'webp', 'png', 'svg', 'gif', 'jpg', 'jpeg', 'bmp', 'dpg'];
 // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
 const previewFile = (file, callback) => {
   if (file.type && !imageTypes.includes(file.type)) {
@@ -34,7 +35,7 @@ const isImageUrl = file => {
   }
   const url = file.thumbUrl || file.url;
   const extension = extname(url);
-  if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|bmp)$/i.test(extension)) {
+  if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|bmp|dpg)$/i.test(extension)) {
     return true;
   } else if (/^data:/.test(url)) {
     // other file types of base64
@@ -55,10 +56,12 @@ export default {
       strokeWidth: 2,
       showInfo: false,
     },
-    prefixCls: 'ant-upload',
     showRemoveIcon: true,
     showPreviewIcon: true,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   updated() {
     this.$nextTick(() => {
       if (this.listType !== 'picture' && this.listType !== 'picture-card') {
@@ -102,13 +105,16 @@ export default {
   },
   render() {
     const {
-      prefixCls,
+      prefixCls: customizePrefixCls,
       items = [],
       listType,
       showPreviewIcon,
       showRemoveIcon,
       locale,
     } = getOptionProps(this);
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('upload', customizePrefixCls);
+
     const list = items.map(file => {
       let progress;
       let icon = <Icon type={file.status === 'uploading' ? 'loading' : 'paper-clip'} />;

components/upload/interface.jsx

@@ -85,6 +85,7 @@ export const UploadProps = {
   openFileDialogOnClick: PropsTypes.bool,
   locale: UploadLocale,
   height: PropsTypes.number,
+  id: PropsTypes.string,
 };
 
 export const UploadState = {