diff --git a/components/components.ts b/components/components.ts index b733f1a48..aa3bbd4ab 100644 --- a/components/components.ts +++ b/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'; diff --git a/components/upload/Dragger.tsx b/components/upload/Dragger.tsx index 1e0c7f249..d3d985eb1 100644 --- a/components/upload/Dragger.tsx +++ b/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; diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index 53f4c868a..6bf14054e 100644 --- a/components/upload/Upload.tsx +++ b/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 { - 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: '', diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx index 05f5fdc9b..a621f2cd1 100644 --- a/components/upload/UploadList.tsx +++ b/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, diff --git a/components/upload/__tests__/upload.test.js b/components/upload/__tests__/upload.test.js index 9cd90b702..e82a8907e 100644 --- a/components/upload/__tests__/upload.test.js +++ b/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()); diff --git a/components/upload/__tests__/uploadlist.test.js b/components/upload/__tests__/uploadlist.test.js index 5bc2946e0..6fe88fca9 100644 --- a/components/upload/__tests__/uploadlist.test.js +++ b/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 = [ diff --git a/components/upload/demo/avatar.vue b/components/upload/demo/avatar.vue index 105135162..cd68f1a22 100644 --- a/components/upload/demo/avatar.vue +++ b/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(false); const imageUrl = ref(''); - 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!'); diff --git a/components/upload/demo/basic.vue b/components/upload/demo/basic.vue index 003b67716..3c9862438 100644 --- a/components/upload/demo/basic.vue +++ b/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); } diff --git a/components/upload/demo/defaultFileList.vue b/components/upload/demo/defaultFileList.vue index b972aefd6..0cb1fab90 100644 --- a/components/upload/demo/defaultFileList.vue +++ b/components/upload/demo/defaultFileList.vue @@ -26,25 +26,14 @@ Use `defaultFileList` for uploaded files when page init.