Refactor upload

components/components.ts

@@ -224,7 +224,7 @@ export {
   TypographyTitle,
 } from './typography';
 
-export type { UploadProps, UploadListProps, UploadChangeParam } from './upload';
+export type { UploadProps, UploadListProps, UploadChangeParam, UploadFile } from './upload';
 
 export { default as Upload, UploadDragger } from './upload';
 

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -1535,8 +1535,10 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
       </label></div>
     <div class="ant-col ant-col-14 ant-form-item-control">
       <div class="ant-form-item-control-input">
-        <div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><span role="button" tabindex="0" class="ant-upload"><input id="validate_other_upload" type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to upload</span></button></span></div>
-        <div class="ant-upload-list ant-upload-list-picture"></div></span>
+        <div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-select ant-upload-select-picture"><span tabindex="0" class="ant-upload" role="button"><input id="validate_other_upload" type="file" style="display: none;" accept="" capture="false"><button class="ant-btn" type="button"><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to upload</span></button></span></div>
+        <div class="ant-upload-list ant-upload-list-picture">
+          <!---->
+        </div></span>
       </div>
       <!---->
     </div>
@@ -1550,17 +1552,18 @@ exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = `
       </label></div>
     <div class="ant-col ant-col-14 ant-form-item-control">
       <div class="ant-form-item-control-input">
-        <div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-drag"><span role="button" tabindex="0" class="ant-upload ant-upload-btn"><input id="validate_other_dragger" type="file" style="display: none;" accept=""><div class="ant-upload-drag-container"><p class="ant-upload-drag-icon"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span></p>
+        <div class="ant-form-item-control-input-content"><span><div class="ant-upload ant-upload-drag"><span tabindex="0" class="ant-upload ant-upload-btn" role="button"><input id="validate_other_dragger" type="file" style="display: none;" accept="" capture="false"><p class="ant-upload-drag-icon"><span role="img" aria-label="inbox" class="anticon anticon-inbox"><svg focusable="false" class="" data-icon="inbox" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0060.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z"></path></svg></span></p>
           <p class="ant-upload-text">Click or drag file to this area to upload</p>
-          <p class="ant-upload-hint">Support for a single or bulk upload.</p>
+          <p class="ant-upload-hint">Support for a single or bulk upload.</p></span>
+        </div>
+        <div class="ant-upload-list ant-upload-list-text">
+          <!---->
         </div></span>
       </div>
-      <div class="ant-upload-list ant-upload-list-text"></div></span>
+      <!---->
     </div>
     <!---->
-  </div>
-  <!---->
-  <!---->
+    <!---->
   </div>
   </div>
   <div class="ant-row ant-form-item">

components/locale-provider/index.tsx

@@ -9,6 +9,7 @@ import type { TransferLocale } from '../transfer';
 import type { PickerLocale as DatePickerLocale } from '../date-picker/generatePicker';
 import type { PaginationLocale } from '../pagination/Pagination';
 import type { TableLocale } from '../table/interface';
+import type { UploadLocale } from '../upload/interface';
 
 interface TransferLocaleForEmpty {
   description: string;
@@ -18,7 +19,6 @@ export interface Locale {
   Pagination?: PaginationLocale;
   Table?: TableLocale;
   Popconfirm?: Record<string, any>;
-  Upload?: Record<string, any>;
   Form?: {
     optional?: string;
     defaultValidateMessages: ValidateMessages;
@@ -32,6 +32,7 @@ export interface Locale {
   Modal?: ModalLocale;
   Transfer?: Partial<TransferLocale>;
   Select?: Record<string, any>;
+  Upload?: UploadLocale;
   Empty?: TransferLocaleForEmpty;
   global?: Record<string, any>;
   PageHeader?: { back: string };

components/space/__tests__/__snapshots__/demo.test.js.snap

@@ -61,8 +61,10 @@ exports[`renders ./components/space/demo/base.vue correctly 1`] = `
       <!----><span>Button</span>
     </button></div>
   <!---->
-  <div class="ant-space-item" style="margin-right: 8px;"><span><div class="ant-upload ant-upload-select ant-upload-select-text"><span role="button" tabindex="0" class="ant-upload"><input type="file" style="display: none;" accept=""><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to Upload</span></button></span></div>
-  <div class="ant-upload-list ant-upload-list-text"></div></span>
+  <div class="ant-space-item" style="margin-right: 8px;"><span><div class="ant-upload ant-upload-select ant-upload-select-text"><span tabindex="0" class="ant-upload" role="button"><input type="file" style="display: none;" accept="" capture="false"><button class="ant-btn" type="button"><!----><span role="img" aria-label="upload" class="anticon anticon-upload"><svg focusable="false" class="" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg></span><span>Click to Upload</span></button></span></div>
+  <div class="ant-upload-list ant-upload-list-text">
+    <!---->
+  </div></span>
 </div>
 <!---->
 <div class="ant-space-item">

components/style/themes/default.less

@@ -965,6 +965,10 @@
 @typography-title-margin-top: 1.2em;
 @typography-title-margin-bottom: 0.5em;
 
+// Upload
+// ---
+@upload-actions-color: @text-color-secondary;
+
 // Image
 // ---
 @image-size-base: 48px;

components/upload/Dragger.tsx

@@ -1,22 +1,22 @@
 import { defineComponent } from 'vue';
-import { getOptionProps, getSlot } from '../_util/props-util';
 import Upload from './Upload';
 import { uploadProps } from './interface';
 
 export default defineComponent({
   name: 'AUploadDragger',
   inheritAttrs: false,
-  props: uploadProps,
-  render() {
-    const props = getOptionProps(this);
-    const { height, ...restProps } = props;
-    const { style, ...restAttrs } = this.$attrs;
-    const draggerProps = {
-      ...restProps,
-      ...restAttrs,
-      type: 'drag',
-      style: { ...(style as any), height },
-    } as any;
-    return <Upload {...draggerProps}>{getSlot(this)}</Upload>;
+  props: uploadProps(),
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { height, ...restProps } = props;
+      const { style, ...restAttrs } = attrs;
+      const draggerProps = {
+        ...restProps,
+        ...restAttrs,
+        type: 'drag',
+        style: { ...(style as any), height: typeof height === 'number' ? `${height}px` : height },
+      } as any;
+      return <Upload {...draggerProps} v-slots={slots}></Upload>;
+    };
   },
 });