refactor: upload types, close #5047

Author: tangjinzhou

components/components.ts

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

components/upload/Dragger.tsx

@@ -1,12 +1,12 @@
 import { defineComponent } from 'vue';
 import { getOptionProps, getSlot } from '../_util/props-util';
 import Upload from './Upload';
-import { UploadProps } from './interface';
+import { uploadProps } from './interface';
 
 export default defineComponent({
   name: 'AUploadDragger',
   inheritAttrs: false,
-  props: UploadProps,
+  props: uploadProps,
   render() {
     const props = getOptionProps(this);
     const { height, ...restProps } = props;

components/upload/Upload.tsx

@@ -10,39 +10,19 @@ import defaultLocale from '../locale-provider/default';
 import { defaultConfigProvider } from '../config-provider';
 import Dragger from './Dragger';
 import UploadList from './UploadList';
-import { UploadProps } from './interface';
+import type { UploadFile } from './interface';
+import { uploadProps } from './interface';
 import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils';
 import { defineComponent, inject } from 'vue';
 import { getDataAndAriaProps } from '../_util/util';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 
-export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
-export interface UploadFile<T = any> {
-  uid: string;
-  size?: number;
-  name: string;
-  fileName?: string;
-  lastModified?: number;
-  lastModifiedDate?: Date;
-  url?: string;
-  status?: UploadFileStatus;
-  percent?: number;
-  thumbUrl?: string;
-  originFileObj?: any;
-  response?: T;
-  error?: any;
-  linkProps?: any;
-  type?: string;
-  xhr?: T;
-  preview?: string;
-}
-
 export default defineComponent({
   name: 'AUpload',
   mixins: [BaseMixin],
   inheritAttrs: false,
   Dragger,
-  props: initDefaultProps(UploadProps, {
+  props: initDefaultProps(uploadProps, {
     type: 'select',
     multiple: false,
     action: '',

components/upload/UploadList.tsx

@@ -20,12 +20,12 @@ import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
 import Tooltip from '../tooltip';
 import Progress from '../progress';
 import classNames from '../_util/classNames';
-import { UploadListProps } from './interface';
+import { uploadListProps } from './interface';
 
 export default defineComponent({
   name: 'AUploadList',
   mixins: [BaseMixin],
-  props: initDefaultProps(UploadListProps, {
+  props: initDefaultProps(uploadListProps, {
     listType: 'text', // or picture
     progressAttr: {
       strokeWidth: 2,

components/upload/__tests__/upload.test.js

@@ -2,10 +2,10 @@ import { mount } from '@vue/test-utils';
 import Upload from '..';
 import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from '../utils';
 import PropsTypes from '../../_util/vue-types';
-import { UploadListProps } from '../interface';
+import { uploadListProps } from '../interface';
 import { setup, teardown } from './mock';
 
-UploadListProps.items = PropsTypes.any;
+uploadListProps.items = PropsTypes.any;
 
 describe('Upload', () => {
   beforeEach(() => setup());

components/upload/__tests__/uploadlist.test.js

@@ -3,11 +3,11 @@ import * as Vue from 'vue';
 import Upload from '..';
 import { errorRequest, successRequest } from './requests';
 import PropsTypes from '../../_util/vue-types';
-import { UploadListProps } from '../interface';
+import { uploadListProps } from '../interface';
 import { sleep } from '../../../tests/utils';
 import { h } from 'vue';
 
-UploadListProps.items = PropsTypes.any;
+uploadListProps.items = PropsTypes.any;
 
 const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
 const fileList = [

components/upload/demo/avatar.vue

@@ -42,22 +42,7 @@ Click to upload user's avatar, and validate size and format of picture with `bef
 import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
-
-interface FileItem {
-  uid: string;
-  name?: string;
-  status?: string;
-  response?: string;
-  url?: string;
-  type?: string;
-  size: number;
-  originFileObj: any;
-}
-
-interface FileInfo {
-  file: FileItem;
-  fileList: FileItem[];
-}
+import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
 
 function getBase64(img: Blob, callback: (base64Url: string) => void) {
   const reader = new FileReader();
@@ -74,7 +59,7 @@ export default defineComponent({
     const loading = ref<boolean>(false);
     const imageUrl = ref<string>('');
 
-    const handleChange = (info: FileInfo) => {
+    const handleChange = (info: UploadChangeParam) => {
       if (info.file.status === 'uploading') {
         loading.value = true;
         return;
@@ -92,7 +77,7 @@ export default defineComponent({
       }
     };
 
-    const beforeUpload = (file: FileItem) => {
+    const beforeUpload = (file: UploadProps['fileList'][number]) => {
       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
       if (!isJpgOrPng) {
         message.error('You can only upload JPG file!');

components/upload/demo/basic.vue

@@ -34,26 +34,14 @@ Classic mode. File selection dialog pops up when upload button is clicked.
 import { message } from 'ant-design-vue';
 import { UploadOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
-
-interface FileItem {
-  uid: string;
-  name?: string;
-  status?: string;
-  response?: string;
-  url?: string;
-}
-
-interface FileInfo {
-  file: FileItem;
-  fileList: FileItem[];
-}
+import type { UploadChangeParam } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
     UploadOutlined,
   },
   setup() {
-    const handleChange = (info: FileInfo) => {
+    const handleChange = (info: UploadChangeParam) => {
       if (info.file.status !== 'uploading') {
         console.log(info.file, info.fileList);
       }

components/upload/demo/defaultFileList.vue

@@ -26,25 +26,14 @@ Use `defaultFileList` for uploaded files when page init.
 <script lang="ts">
 import { UploadOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
-
-interface FileItem {
-  uid: string;
-  name?: string;
-  status?: string;
-  response?: string;
-  url?: string;
-}
-interface FileInfo {
-  file: FileItem;
-  fileList: FileItem[];
-}
+import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
     UploadOutlined,
   },
   setup() {
-    const fileList = ref<FileItem[]>([
+    const fileList = ref<UploadProps['fileList']>([
       {
         uid: '1',
         name: 'xxx.png',
@@ -67,7 +56,7 @@ export default defineComponent({
       },
     ]);
 
-    const handleChange = ({ file, fileList }: FileInfo) => {
+    const handleChange = ({ file, fileList }: UploadChangeParam) => {
       if (file.status !== 'uploading') {
         console.log(file, fileList);
       }

components/upload/demo/drag.vue

@@ -41,26 +41,14 @@ We can upload serveral files at once in modern browsers by giving the input the
 import { InboxOutlined } from '@ant-design/icons-vue';
 import { message } from 'ant-design-vue';
 import { defineComponent, ref } from 'vue';
-
-interface FileItem {
-  uid: string;
-  name?: string;
-  status?: string;
-  response?: string;
-  url?: string;
-}
-
-interface FileInfo {
-  file: FileItem;
-  fileList: FileItem[];
-}
+import type { UploadChangeParam } from 'ant-design-vue';
 
 export default defineComponent({
   components: {
     InboxOutlined,
   },
   setup() {
-    const handleChange = (info: FileInfo) => {
+    const handleChange = (info: UploadChangeParam) => {
       const status = info.file.status;
       if (status !== 'uploading') {
         console.log(info.file, info.fileList);