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);

components/upload/demo/fileList.vue

@@ -39,34 +39,22 @@ You can gain full control over filelist by configuring `fileList`. You can accom
 <script lang="ts">
 import { UploadOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
-
-interface FileItem {
-  uid: string;
-  name?: string;
-  status?: string;
-  response?: Response;
-  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',
         status: 'done',
         url: 'http://www.baidu.com/xxx.png',
       },
     ]);
-    const handleChange = (info: FileInfo) => {
+    const handleChange = (info: UploadChangeParam) => {
       let resFileList = [...info.fileList];
 
       // 1. Limit the number of uploaded files

components/upload/demo/picture-card.vue

@@ -36,6 +36,7 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
 <script lang="ts">
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { defineComponent, ref } from 'vue';
+import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
 
 function getBase64(file: File) {
   return new Promise((resolve, reject) => {
@@ -46,22 +47,6 @@ function getBase64(file: File) {
   });
 }
 
-interface FileItem {
-  uid: string;
-  name?: string;
-  status?: string;
-  response?: string;
-  percent?: number;
-  url?: string;
-  preview?: string;
-  originFileObj?: any;
-}
-
-interface FileInfo {
-  file: FileItem;
-  fileList: FileItem[];
-}
-
 export default defineComponent({
   components: {
     PlusOutlined,
@@ -70,7 +55,7 @@ export default defineComponent({
     const previewVisible = ref<boolean>(false);
     const previewImage = ref<string | undefined>('');
 
-    const fileList = ref<FileItem[]>([
+    const fileList = ref<UploadProps['fileList']>([
       {
         uid: '-1',
         name: 'image.png',
@@ -105,14 +90,14 @@ export default defineComponent({
     const handleCancel = () => {
       previewVisible.value = false;
     };
-    const handlePreview = async (file: FileItem) => {
+    const handlePreview = async (file: UploadProps['fileList'][number]) => {
       if (!file.url && !file.preview) {
         file.preview = (await getBase64(file.originFileObj)) as string;
       }
       previewImage.value = file.url || file.preview;
       previewVisible.value = true;
     };
-    const handleChange = ({ fileList: newFileList }: FileInfo) => {
+    const handleChange = ({ fileList: newFileList }: UploadChangeParam) => {
       fileList.value = newFileList;
     };
 

components/upload/demo/picture-style.vue

@@ -46,22 +46,14 @@ If uploaded file is a picture, the thumbnail can be shown. `IE8/9` do not suppor
 <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;
-  thumbUrl?: string;
-}
+import type { 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',
@@ -77,7 +69,7 @@ export default defineComponent({
         thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
       },
     ]);
-    const fileList1 = ref<FileItem[]>([
+    const fileList1 = ref<UploadProps['fileList']>([
       {
         uid: '-1',
         name: 'xxx.png',