>>;
+
+export default defineComponent({
+ name: 'ListItem',
+ inheritAttrs: false,
+ props: listItemProps(),
+ setup(props, { slots, attrs }) {
+ const showProgress = ref(false);
+ const progressRafRef = ref();
+ onMounted(() => {
+ progressRafRef.value = setTimeout(() => {
+ showProgress.value = true;
+ }, 300);
+ });
+ onBeforeUnmount(() => {
+ clearTimeout(progressRafRef.value);
+ });
+ const { rootPrefixCls } = useConfigInject('upload', props);
+ const transitionProps = computed(() => getTransitionProps(`${rootPrefixCls.value}-fade`));
+ return () => {
+ const {
+ prefixCls,
+ locale,
+ listType,
+ file,
+ items,
+ progress: progressProps,
+ iconRender,
+ actionIconRender,
+ itemRender = slots.itemRender,
+ isImgUrl,
+ showPreviewIcon,
+ showRemoveIcon,
+ showDownloadIcon,
+ previewIcon: customPreviewIcon = slots.previewIcon,
+ removeIcon: customRemoveIcon = slots.removeIcon,
+ downloadIcon: customDownloadIcon = slots.downloadIcon,
+ onPreview,
+ onDownload,
+ onClose,
+ } = props;
+ const { class: className, style } = attrs;
+ // This is used for legacy span make scrollHeight the wrong value.
+ // We will force these to be `display: block` with non `picture-card`
+ const spanClassName = `${prefixCls}-span`;
+
+ const iconNode = iconRender({ file });
+ let icon = {iconNode}
;
+ if (listType === 'picture' || listType === 'picture-card') {
+ if (file.status === 'uploading' || (!file.thumbUrl && !file.url)) {
+ const uploadingClassName = {
+ [`${prefixCls}-list-item-thumbnail`]: true,
+ [`${prefixCls}-list-item-file`]: file.status !== 'uploading',
+ };
+ icon = {iconNode}
;
+ } else {
+ const thumbnail = isImgUrl?.(file) ? (
+ 
+ ) : (
+ iconNode
+ );
+ const aClassName = {
+ [`${prefixCls}-list-item-thumbnail`]: true,
+ [`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file),
+ };
+ icon = (
+ onPreview(file, e)}
+ href={file.url || file.thumbUrl}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ {thumbnail}
+
+ );
+ }
+ }
+
+ const infoUploadingClass = {
+ [`${prefixCls}-list-item`]: true,
+ [`${prefixCls}-list-item-${file.status}`]: true,
+ [`${prefixCls}-list-item-list-type-${listType}`]: true,
+ };
+ const linkProps =
+ typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
+
+ const removeIcon = showRemoveIcon
+ ? actionIconRender({
+ customIcon: customRemoveIcon ? customRemoveIcon({ file }) : ,
+ callback: () => onClose(file),
+ prefixCls,
+ title: locale.removeFile,
+ })
+ : null;
+
+ const downloadIcon =
+ showDownloadIcon && file.status === 'done'
+ ? actionIconRender({
+ customIcon: customDownloadIcon ? customDownloadIcon({ file }) : ,
+ callback: () => onDownload(file),
+ prefixCls,
+ title: locale.downloadFile,
+ })
+ : null;
+ const downloadOrDelete = listType !== 'picture-card' && (
+
+ {downloadIcon}
+ {removeIcon}
+
+ );
+ const listItemNameClass = `${prefixCls}-list-item-name`;
+ const preview = file.url
+ ? [
+ onPreview(file, e)}
+ >
+ {file.name}
+ ,
+ downloadOrDelete,
+ ]
+ : [
+ onPreview(file, e)}
+ title={file.name}
+ >
+ {file.name}
+ ,
+ downloadOrDelete,
+ ];
+ const previewStyle: CSSProperties = {
+ pointerEvents: 'none',
+ opacity: 0.5,
+ };
+ const previewIcon = showPreviewIcon ? (
+ onPreview(file, e)}
+ title={locale.previewFile}
+ >
+ {customPreviewIcon ? customPreviewIcon({ file }) : }
+
+ ) : null;
+
+ const actions = listType === 'picture-card' && file.status !== 'uploading' && (
+
+ {previewIcon}
+ {file.status === 'done' && downloadIcon}
+ {removeIcon}
+
+ );
+
+ let message;
+ if (file.response && typeof file.response === 'string') {
+ message = file.response;
+ } else {
+ message = file.error?.statusText || file.error?.message || locale.uploadError;
+ }
+ const iconAndPreview = (
+
+ {icon}
+ {preview}
+
+ );
+
+ const dom = (
+
+
{iconAndPreview}
+ {actions}
+ {showProgress.value && (
+
+
+ {'percent' in file ? (
+
+ ) : null}
+
+ )}
+
+ {itemRender
+ ? itemRender({
+ originNode: item,
+ file,
+ fileList: items,
+ actions: {
+ download: onDownload.bind(null, file),
+ preview: onPreview.bind(null, file),
+ remove: onClose.bind(null, file),
+ },
+ })
+ : item}
+
+ );
+ };
+ },
+});
diff --git a/components/upload copy/UploadList/index.tsx b/components/upload copy/UploadList/index.tsx
new file mode 100644
index 000000000..89955c212
--- /dev/null
+++ b/components/upload copy/UploadList/index.tsx
@@ -0,0 +1,261 @@
+import * as React from 'react';
+import CSSMotion, { CSSMotionList, CSSMotionListProps } from 'rc-motion';
+import classNames from 'classnames';
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
+import PaperClipOutlined from '@ant-design/icons/PaperClipOutlined';
+import PictureTwoTone from '@ant-design/icons/PictureTwoTone';
+import FileTwoTone from '@ant-design/icons/FileTwoTone';
+import { cloneElement, isValidElement } from '../../_util/reactNode';
+import { UploadListProps, UploadFile, UploadListType, InternalUploadFile } from '../interface';
+import { previewImage, isImageUrl } from '../utils';
+import collapseMotion from '../../_util/motion';
+import { ConfigContext } from '../../config-provider';
+import Button, { ButtonProps } from '../../button';
+import useForceUpdate from '../../_util/hooks/useForceUpdate';
+import ListItem from './ListItem';
+
+const listItemMotion: Partial = {
+ ...collapseMotion,
+};
+
+delete listItemMotion.onAppearEnd;
+delete listItemMotion.onEnterEnd;
+delete listItemMotion.onLeaveEnd;
+
+const InternalUploadList: React.ForwardRefRenderFunction = (
+ {
+ listType,
+ previewFile,
+ onPreview,
+ onDownload,
+ onRemove,
+ locale,
+ iconRender,
+ isImageUrl: isImgUrl,
+ prefixCls: customizePrefixCls,
+ items = [],
+ showPreviewIcon,
+ showRemoveIcon,
+ showDownloadIcon,
+ removeIcon,
+ previewIcon,
+ downloadIcon,
+ progress,
+ appendAction,
+ itemRender,
+ },
+ ref,
+) => {
+ const forceUpdate = useForceUpdate();
+ const [motionAppear, setMotionAppear] = React.useState(false);
+
+ // ============================= Effect =============================
+ React.useEffect(() => {
+ if (listType !== 'picture' && listType !== 'picture-card') {
+ return;
+ }
+ (items || []).forEach((file: InternalUploadFile) => {
+ if (
+ typeof document === 'undefined' ||
+ typeof window === 'undefined' ||
+ !(window as any).FileReader ||
+ !(window as any).File ||
+ !(file.originFileObj instanceof File || (file.originFileObj as Blob) instanceof Blob) ||
+ file.thumbUrl !== undefined
+ ) {
+ return;
+ }
+ file.thumbUrl = '';
+ if (previewFile) {
+ previewFile(file.originFileObj as File).then((previewDataUrl: string) => {
+ // Need append '' to avoid dead loop
+ file.thumbUrl = previewDataUrl || '';
+ forceUpdate();
+ });
+ }
+ });
+ }, [listType, items, previewFile]);
+
+ React.useEffect(() => {
+ setMotionAppear(true);
+ }, []);
+
+ // ============================= Events =============================
+ const onInternalPreview = (file: UploadFile, e?: React.SyntheticEvent) => {
+ if (!onPreview) {
+ return;
+ }
+ e?.preventDefault();
+ return onPreview(file);
+ };
+
+ const onInternalDownload = (file: UploadFile) => {
+ if (typeof onDownload === 'function') {
+ onDownload(file);
+ } else if (file.url) {
+ window.open(file.url);
+ }
+ };
+
+ const onInternalClose = (file: UploadFile) => {
+ onRemove?.(file);
+ };
+
+ const internalIconRender = (file: UploadFile) => {
+ if (iconRender) {
+ return iconRender(file, listType);
+ }
+ const isLoading = file.status === 'uploading';
+ const fileIcon = isImgUrl && isImgUrl(file) ? : ;
+ let icon: React.ReactNode = isLoading ? : ;
+ if (listType === 'picture') {
+ icon = isLoading ? : fileIcon;
+ } else if (listType === 'picture-card') {
+ icon = isLoading ? locale.uploading : fileIcon;
+ }
+ return icon;
+ };
+
+ const actionIconRender = (
+ customIcon: React.ReactNode,
+ callback: () => void,
+ prefixCls: string,
+ title?: string,
+ ) => {
+ const btnProps: ButtonProps = {
+ type: 'text',
+ size: 'small',
+ title,
+ onClick: (e: React.MouseEvent) => {
+ callback();
+ if (isValidElement(customIcon) && customIcon.props.onClick) {
+ customIcon.props.onClick(e);
+ }
+ },
+ className: `${prefixCls}-list-item-card-actions-btn`,
+ };
+ if (isValidElement(customIcon)) {
+ const btnIcon = cloneElement(customIcon, {
+ ...customIcon.props,
+ onClick: () => {},
+ });
+
+ return ;
+ }
+ return (
+
+ );
+ };
+
+ // ============================== Ref ===============================
+ // Test needs
+ React.useImperativeHandle(ref, () => ({
+ handlePreview: onInternalPreview,
+ handleDownload: onInternalDownload,
+ }));
+
+ const { getPrefixCls, direction } = React.useContext(ConfigContext);
+
+ // ============================= Render =============================
+ const prefixCls = getPrefixCls('upload', customizePrefixCls);
+
+ const listClassNames = classNames({
+ [`${prefixCls}-list`]: true,
+ [`${prefixCls}-list-${listType}`]: true,
+ [`${prefixCls}-list-rtl`]: direction === 'rtl',
+ });
+
+ // >>> Motion config
+ const motionKeyList = [
+ ...items.map(file => ({
+ key: file.uid,
+ file,
+ })),
+ ];
+
+ const animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
+ // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
+
+ let motionConfig: Omit = {
+ motionDeadline: 2000,
+ motionName: `${prefixCls}-${animationDirection}`,
+ keys: motionKeyList,
+ motionAppear,
+ };
+
+ if (listType !== 'picture-card') {
+ motionConfig = {
+ ...listItemMotion,
+ ...motionConfig,
+ };
+ }
+
+ return (
+
+
+ {({ key, file, className: motionClassName, style: motionStyle }) => (
+
+ )}
+
+
+ {/* Append action */}
+ {appendAction && (
+
+ {({ className: motionClassName, style: motionStyle }) =>
+ cloneElement(appendAction, oriProps => ({
+ className: classNames(oriProps.className, motionClassName),
+ style: {
+ ...motionStyle,
+ ...oriProps.style,
+ },
+ }))
+ }
+
+ )}
+
+ );
+};
+
+const UploadList = React.forwardRef(InternalUploadList);
+
+UploadList.displayName = 'UploadList';
+
+UploadList.defaultProps = {
+ listType: 'text' as UploadListType, // or picture
+ progress: {
+ strokeWidth: 2,
+ showInfo: false,
+ },
+ showRemoveIcon: true,
+ showDownloadIcon: false,
+ showPreviewIcon: true,
+ previewFile: previewImage,
+ isImageUrl,
+};
+
+export default UploadList;
diff --git a/components/upload copy/__tests__/__snapshots__/demo.test.js.snap b/components/upload copy/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..924cda504
--- /dev/null
+++ b/components/upload copy/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./components/upload/demo/avatar.vue correctly 1`] = `
+
+`;
+
+exports[`renders ./components/upload/demo/basic.vue correctly 1`] = `
+
+
+`;
+
+exports[`renders ./components/upload/demo/defaultFileList.vue correctly 1`] = `
+
+
+`;
+
+exports[`renders ./components/upload/demo/directory.vue correctly 1`] = `
+
+
+`;
+
+exports[`renders ./components/upload/demo/drag.vue correctly 1`] = `
+
+
Click or drag file to this area to upload
+
Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files
+
+`;
+
+exports[`Upload List handle error 2`] = `
+
+`;
+
+exports[`Upload List should be uploading when upload a file 1`] = `
`;
+
+exports[`Upload List should non-image format file preview 1`] = `
+
+`;
diff --git a/components/upload copy/__tests__/demo.test.js b/components/upload copy/__tests__/demo.test.js
new file mode 100644
index 000000000..8fd9b81ab
--- /dev/null
+++ b/components/upload copy/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('upload', { skip: ['upload-manually'] });
diff --git a/components/upload copy/__tests__/mock.js b/components/upload copy/__tests__/mock.js
new file mode 100644
index 000000000..1f2e57c8a
--- /dev/null
+++ b/components/upload copy/__tests__/mock.js
@@ -0,0 +1,14 @@
+import mock from 'xhr-mock';
+
+export function setup() {
+ mock.setup();
+ mock.post('http://upload.com/', (req, res) => {
+ req.headers({
+ 'content-length': 100,
+ });
+ req.body('thisisbody');
+ return res;
+ });
+}
+
+export const teardown = mock.teardown.bind(mock);
diff --git a/components/upload copy/__tests__/requests.js b/components/upload copy/__tests__/requests.js
new file mode 100644
index 000000000..d90ed171f
--- /dev/null
+++ b/components/upload copy/__tests__/requests.js
@@ -0,0 +1,11 @@
+export const successRequest = ({ onSuccess, file }) => {
+ setTimeout(() => {
+ onSuccess(null, file);
+ });
+};
+
+export const errorRequest = ({ onError }) => {
+ setTimeout(() => {
+ onError();
+ });
+};
diff --git a/components/upload copy/__tests__/upload.test.js b/components/upload copy/__tests__/upload.test.js
new file mode 100644
index 000000000..e82a8907e
--- /dev/null
+++ b/components/upload copy/__tests__/upload.test.js
@@ -0,0 +1,331 @@
+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 { setup, teardown } from './mock';
+
+uploadListProps.items = PropsTypes.any;
+
+describe('Upload', () => {
+ beforeEach(() => setup());
+ afterEach(() => teardown());
+ it('should get refs inside Upload in componentDidMount', () => {
+ let ref = null;
+ const APP = {
+ mounted() {
+ ref = this.$refs.input;
+ },
+ render() {
+ return (
+
+
+
+ );
+ },
+ };
+ mount(APP);
+ expect(ref).toBeDefined();
+ });
+
+ xit('return promise in beforeUpload', done => {
+ const data = jest.fn();
+ const props = {
+ props: {
+ action: 'http://upload.com',
+ beforeUpload: () => new Promise(resolve => setTimeout(() => resolve('success'), 100)),
+ data,
+ },
+ listeners: {
+ change: ({ file }) => {
+ if (file.status !== 'uploading') {
+ expect(data).toBeCalled();
+ done();
+ }
+ },
+ },
+ slots: {
+ default: () => ,
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ wrapper.findComponent('ajaxUploader').vm.onChange({
+ target: {
+ files: [{ file: 'foo.png' }],
+ },
+ });
+ }, 0);
+ });
+
+ xit('upload promise return file in beforeUpload', done => {
+ const data = jest.fn();
+ const props = {
+ action: 'http://upload.com',
+ beforeUpload: file =>
+ new Promise(resolve =>
+ setTimeout(() => {
+ const result = file;
+ result.name = 'test.png';
+ resolve(result);
+ }, 100),
+ ),
+ data,
+ onChange: ({ file }) => {
+ if (file.status !== 'uploading') {
+ expect(data).toBeCalled();
+ expect(file.name).toEqual('test.png');
+ done();
+ }
+ },
+ slots: {
+ default: () => ,
+ },
+ sync: false,
+ };
+
+ const wrapper = mount(Upload, props);
+
+ setTimeout(() => {
+ wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+ target: {
+ files: [{ file: 'foo.png' }],
+ },
+ });
+ }, 0);
+ });
+
+ xit('should not stop upload when return value of beforeUpload is false', done => {
+ const data = jest.fn();
+ const props = {
+ action: 'http://upload.com',
+ beforeUpload: () => false,
+ data,
+ onChange: ({ file }) => {
+ expect(file instanceof File).toBe(true);
+ expect(data).not.toBeCalled();
+ done();
+ },
+ slots: {
+ default: () => ,
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ const mockFile = new File(['foo'], 'foo.png', {
+ type: 'image/png',
+ });
+ wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+ target: {
+ files: [mockFile],
+ },
+ });
+ }, 0);
+ });
+
+ xit('should increase percent automaticly when call autoUpdateProgress in IE', done => {
+ let uploadInstance;
+ let lastPercent = -1;
+ const props = {
+ props: {
+ action: 'http://upload.com',
+ },
+ listeners: {
+ change: ({ file }) => {
+ if (file.percent === 0 && file.status === 'uploading') {
+ // manually call it
+ uploadInstance.autoUpdateProgress(0, file);
+ }
+ if (file.status === 'uploading') {
+ expect(file.percent).toBeGreaterThan(lastPercent);
+ lastPercent = file.percent;
+ }
+ if (file.status === 'done' || file.status === 'error') {
+ done();
+ }
+ },
+ },
+ slots: {
+ default: '',
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ const mockFile = new File(['foo'], 'foo.png', {
+ type: 'image/png',
+ });
+ wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+ target: {
+ files: [mockFile],
+ },
+ });
+ uploadInstance = wrapper.vm;
+ }, 0);
+ });
+ xit('should not stop upload when return value of beforeUpload is not false', done => {
+ const data = jest.fn();
+ const props = {
+ props: {
+ action: 'http://upload.com',
+ beforeUpload() {},
+ data,
+ },
+ listeners: {
+ change: () => {
+ expect(data).toBeCalled();
+ done();
+ },
+ },
+ slots: {
+ default: '',
+ },
+ sync: false,
+ };
+
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ const mockFile = new File(['foo'], 'foo.png', {
+ type: 'image/png',
+ });
+ wrapper.find({ name: 'ajaxUploader' }).vm.onChange({
+ target: {
+ files: [mockFile],
+ },
+ });
+ }, 0);
+ });
+
+ describe('util', () => {
+ // https://github.com/react-component/upload/issues/36
+ it('should T() return true', () => {
+ const res = T();
+ expect(res).toBe(true);
+ });
+ it('should be able to copy file instance', () => {
+ const file = new File([], 'aaa.zip');
+ const copiedFile = fileToObject(file);
+ ['uid', 'lastModified', 'lastModifiedDate', 'name', 'size', 'type'].forEach(key => {
+ expect(key in copiedFile).toBe(true);
+ });
+ });
+ it('should be able to progress from 0.1 ', () => {
+ // 0.1 -> 0.98
+ const getPercent = genPercentAdd();
+ let curPercent = 0;
+ curPercent = getPercent(curPercent);
+ expect(curPercent).toBe(0.1);
+ });
+
+ it('should be able to progress to 0.98 ', () => {
+ // 0.1 -> 0.98
+ const getPercent = genPercentAdd();
+ let curPercent = 0;
+ for (let i = 0; i < 500; i += 1) {
+ curPercent = getPercent(curPercent);
+ }
+ expect(parseFloat(curPercent.toFixed(2))).toBe(0.98);
+ });
+
+ it('should be able to get fileItem', () => {
+ const file = { uid: '-1', name: 'item.jpg' };
+ const fileList = [
+ {
+ uid: '-1',
+ name: 'item.jpg',
+ },
+ ];
+ const targetItem = getFileItem(file, fileList);
+ expect(targetItem).toBe(fileList[0]);
+ });
+
+ it('should be able to remove fileItem', () => {
+ const file = { uid: '-1', name: 'item.jpg' };
+ const fileList = [
+ {
+ uid: '-1',
+ name: 'item.jpg',
+ },
+ {
+ uid: '-2',
+ name: 'item2.jpg',
+ },
+ ];
+ const targetItem = removeFileItem(file, fileList);
+ expect(targetItem).toEqual(fileList.slice(1));
+ });
+
+ it('should not be able to remove fileItem', () => {
+ const file = { uid: '-3', name: 'item.jpg' };
+ const fileList = [
+ {
+ uid: '-1',
+ name: 'item.jpg',
+ },
+ {
+ uid: '-2',
+ name: 'item2.jpg',
+ },
+ ];
+ const targetItem = removeFileItem(file, fileList);
+ expect(targetItem).toBe(null);
+ });
+ });
+
+ it('should support linkProps as object', () => {
+ const fileList = [
+ {
+ uid: '-1',
+ name: 'foo.png',
+ status: 'done',
+ url: 'http://www.baidu.com/xxx.png',
+ linkProps: {
+ download: 'image',
+ rel: 'noopener',
+ },
+ },
+ ];
+ const props = {
+ props: {
+ fileList,
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ const linkNode = wrapper.find('a.ant-upload-list-item-name');
+ expect(linkNode.props().download).toBe('image');
+ expect(linkNode.props().rel).toBe('noopener');
+ }, 0);
+ });
+
+ it('should support linkProps as json stringify', () => {
+ const linkPropsString = JSON.stringify({
+ download: 'image',
+ rel: 'noopener',
+ });
+ const fileList = [
+ {
+ uid: '-1',
+ name: 'foo.png',
+ status: 'done',
+ url: 'http://www.baidu.com/xxx.png',
+ linkProps: linkPropsString,
+ },
+ ];
+ const props = {
+ props: {
+ fileList,
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ const linkNode = wrapper.find('a.ant-upload-list-item-name');
+ expect(linkNode.props().download).toBe('image');
+ expect(linkNode.props().rel).toBe('noopener');
+ }, 0);
+ });
+});
diff --git a/components/upload copy/__tests__/uploadlist.test.js b/components/upload copy/__tests__/uploadlist.test.js
new file mode 100644
index 000000000..6fe88fca9
--- /dev/null
+++ b/components/upload copy/__tests__/uploadlist.test.js
@@ -0,0 +1,433 @@
+import { mount } from '@vue/test-utils';
+import * as Vue from 'vue';
+import Upload from '..';
+import { errorRequest, successRequest } from './requests';
+import PropsTypes from '../../_util/vue-types';
+import { uploadListProps } from '../interface';
+import { sleep } from '../../../tests/utils';
+import { h } from 'vue';
+
+uploadListProps.items = PropsTypes.any;
+
+const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
+const fileList = [
+ {
+ uid: -1,
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ },
+ {
+ uid: -2,
+ name: 'yyy.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ },
+];
+
+describe('Upload List', () => {
+ // jsdom not support `createObjectURL` yet. Let's handle this.
+ const originCreateObjectURL = window.URL.createObjectURL;
+ window.URL.createObjectURL = jest.fn(() => '');
+ const originHTMLCanvasElementGetContext = window.HTMLCanvasElement.prototype.getContext;
+ window.HTMLCanvasElement.prototype.getContext = jest.fn(() => '');
+ // https://github.com/ant-design/ant-design/issues/4653
+ afterAll(() => {
+ window.URL.createObjectURL = originCreateObjectURL;
+ window.HTMLCanvasElement.prototype.getContext = originHTMLCanvasElementGetContext;
+ });
+ it('should use file.thumbUrl for ![]()
in priority', done => {
+ const props = {
+ props: {
+ defaultFileList: fileList,
+ listType: 'picture',
+ action: '',
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ Vue.nextTick(() => {
+ fileList.forEach((file, i) => {
+ const linkNode = wrapper.findAll('.ant-upload-list-item-thumbnail')[i];
+ const imgNode = wrapper.findAll('.ant-upload-list-item-thumbnail img')[i];
+ expect(linkNode.attributes().href).toBe(file.url);
+ expect(imgNode.attributes().src).toBe(file.thumbUrl);
+ });
+ done();
+ });
+ });
+
+ // https://github.com/ant-design/ant-design/issues/7269
+ it('should remove correct item when uid is 0', done => {
+ const list = [
+ {
+ uid: 0,
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ },
+ {
+ uid: 1,
+ name: 'xxx.png',
+ status: 'done',
+ url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+ thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
+ },
+ ];
+ const props = {
+ props: {
+ defaultFileList: list,
+ action: '',
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(async () => {
+ expect(wrapper.findAll('.ant-upload-list-item').length).toBe(2);
+ wrapper.findAll('.ant-upload-list-item')[0].find('.anticon-delete').trigger('click');
+ await delay(400);
+ // wrapper.update();
+ expect(wrapper.findAll('.ant-upload-list-item').length).toBe(1);
+ done();
+ }, 0);
+ });
+
+ xit('should be uploading when upload a file', done => {
+ const props = {
+ props: {
+ action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+ customRequest: successRequest,
+ onChange: ({ file }) => {
+ if (file.status === 'uploading') {
+ expect(wrapper.html()).toMatchSnapshot();
+ done();
+ }
+ if (file.status === 'done') {
+ expect(wrapper.html()).toMatchSnapshot();
+ done();
+ }
+ },
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ const mockFile = new File(['foo'], 'foo.png', {
+ type: 'image/png',
+ });
+ wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
+ target: {
+ files: [mockFile],
+ },
+ });
+ }, 0);
+ });
+
+ xit('handle error', done => {
+ const props = {
+ props: {
+ action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+ customRequest: errorRequest,
+ },
+ listeners: {
+ change: ({ file }) => {
+ if (file.status !== 'uploading') {
+ expect(wrapper.html()).toMatchSnapshot();
+ done();
+ }
+ },
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(() => {
+ const mockFile = new File(['foo'], 'foo.png', {
+ type: 'image/png',
+ });
+ wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
+ target: {
+ files: [mockFile],
+ },
+ });
+ }, 0);
+ });
+
+ xit('does concat filelist when beforeUpload returns false', done => {
+ const handleChange = jest.fn();
+ const props = {
+ props: {
+ action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+ listType: 'picture',
+ defaultFileList: fileList,
+ beforeUpload: () => false,
+ onChange: handleChange,
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+
+ setTimeout(() => {
+ const mockFile = new File(['foo'], 'foo.png', {
+ type: 'image/png',
+ });
+ wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
+ target: {
+ files: [mockFile],
+ },
+ });
+ Vue.nextTick(() => {
+ expect(wrapper.vm.sFileList.length).toBe(fileList.length + 1);
+ expect(handleChange.mock.calls[0][0].fileList).toHaveLength(3);
+ done();
+ });
+ }, 0);
+ });
+
+ // https://github.com/ant-design/ant-design/issues/7762
+ // it('work with form validation', (done) => {
+ // let errors
+ // const TestForm = {
+ // methods: {
+ // handleSubmit () {
+ // const { validateFields } = this.form
+ // validateFields((err) => {
+ // errors = err
+ // })
+ // },
+ // },
+ // render () {
+ // const { getFieldDecorator } = this.form
+
+ // return (
+ //
+ // )
+ // },
+ // }
+
+ // const App = Form.create()(TestForm)
+ // console.dir(App)
+ // const wrapper = mount(() => {
+ // return
+ // })
+ // setTimeout(async () => {
+ // wrapper.find(Form).trigger('submit')
+ // expect(errors.file.errors).toEqual([{ message: 'file required', field: 'file' }])
+
+ // const mockFile = new File(['foo'], 'foo.png', {
+ // type: 'image/png',
+ // })
+ // wrapper.findComponent({ name: 'ajaxUploader' }).vm.onChange({
+ // target: {
+ // files: [mockFile],
+ // },
+ // })
+ // wrapper.find(Form).trigger('submit')
+ // expect(errors).toBeNull()
+ // done()
+ // }, 0)
+ // })
+
+ it('should support onPreview', async () => {
+ const handlePreview = jest.fn();
+ const props = {
+ props: {
+ defaultFileList: fileList,
+ listType: 'picture-card',
+ action: '',
+ onPreview: handlePreview,
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ await sleep(500);
+ wrapper.findAll('.anticon-eye')[0].trigger('click');
+ expect(handlePreview).toBeCalledWith(fileList[0]);
+ wrapper.findAll('.anticon-eye')[1].trigger('click');
+ expect(handlePreview).toBeCalledWith(fileList[1]);
+ });
+
+ it('should support onRemove', done => {
+ const handleRemove = jest.fn();
+ const handleChange = jest.fn();
+ const props = {
+ props: {
+ defaultFileList: fileList,
+ listType: 'picture-card',
+ action: '',
+ remove: handleRemove,
+ onChange: handleChange,
+ },
+
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ jest.setTimeout(300000);
+ setTimeout(async () => {
+ wrapper.findAll('.anticon-delete')[0].trigger('click');
+ expect(handleRemove).toBeCalledWith(fileList[0]);
+ wrapper.findAll('.anticon-delete')[1].trigger('click');
+ expect(handleRemove).toBeCalledWith(fileList[1]);
+ await delay(0);
+ expect(handleChange.mock.calls.length).toBe(2);
+ done();
+ }, 0);
+ });
+
+ xit('should generate thumbUrl from file', done => {
+ const handlePreview = jest.fn();
+ const newFileList = [...fileList];
+ const newFile = { ...fileList[0], uid: -3, originFileObj: new File([], 'xxx.png') };
+ delete newFile.thumbUrl;
+ newFileList.push(newFile);
+ const props = {
+ props: {
+ defaultFileList: newFileList,
+ listType: 'picture-card',
+ action: '',
+ onPreview: handlePreview,
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ setTimeout(async () => {
+ const newFile = { ...fileList[2], uid: -4, originFileObj: new File([], 'xxx.png') };
+ newFileList.push(newFile);
+ wrapper.setProps({
+ defaultFileList: [...newFileList],
+ });
+ await delay(200);
+ expect(wrapper.vm.sFileList[2].thumbUrl).not.toBe(undefined);
+ done();
+ }, 1000);
+ });
+
+ it('should non-image format file preview', done => {
+ const list = [
+ {
+ name: 'not-image',
+ status: 'done',
+ uid: -3,
+ url: 'https://cdn.xxx.com/aaa.zip',
+ thumbUrl: 'data:application/zip;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
+ originFileObj: new File([], 'aaa.zip'),
+ },
+ {
+ name: 'image',
+ status: 'done',
+ uid: -4,
+ url: 'https://cdn.xxx.com/aaa',
+ },
+ {
+ name: 'not-image',
+ status: 'done',
+ uid: -5,
+ url: 'https://cdn.xxx.com/aaa.xx',
+ },
+ {
+ name: 'not-image',
+ status: 'done',
+ uid: -6,
+ url: 'https://cdn.xxx.com/aaa.png/xx.xx',
+ },
+ {
+ name: 'image',
+ status: 'done',
+ uid: -7,
+ url: 'https://cdn.xxx.com/xx.xx/aaa.png',
+ },
+ {
+ name: 'image',
+ status: 'done',
+ uid: -8,
+ url: 'https://cdn.xxx.com/xx.xx/aaa.png',
+ thumbUrl: 'data:image/png;base64,UEsDBAoAAAAAADYZYkwAAAAAAAAAAAAAAAAdAAk',
+ },
+ {
+ name: 'image',
+ status: 'done',
+ uid: -9,
+ url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=123',
+ },
+ {
+ name: 'image',
+ status: 'done',
+ uid: -10,
+ url: 'https://cdn.xxx.com/xx.xx/aaa.png#anchor',
+ },
+ {
+ name: 'image',
+ status: 'done',
+ uid: -11,
+ url: 'https://cdn.xxx.com/xx.xx/aaa.png?query=some.query.with.dot',
+ },
+ ];
+ const props = {
+ props: {
+ defaultFileList: list,
+ listType: 'picture',
+ action: '',
+ },
+ slots: {
+ default: () => h('button', 'upload'),
+ },
+ sync: false,
+ };
+ const wrapper = mount(Upload, props);
+ Vue.nextTick(() => {
+ expect(wrapper.html()).toMatchSnapshot();
+ done();
+ });
+ });
+});
diff --git a/components/upload copy/demo/avatar.vue b/components/upload copy/demo/avatar.vue
new file mode 100644
index 000000000..cd68f1a22
--- /dev/null
+++ b/components/upload copy/demo/avatar.vue
@@ -0,0 +1,116 @@
+
+---
+order: 1
+title:
+ zh-CN: 用户头像
+ en-US: Avatar
+---
+
+## zh-CN
+
+点击上传用户头像，并使用 `beforeUpload` 限制用户上传的图片格式和大小。
+
+> `beforeUpload` 的返回值可以是一个 Promise 以支持异步处理，如服务端校验等：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。
+
+## en-US
+
+Click to upload user's avatar, and validate size and format of picture with `beforeUpload`.
+
+> The return value of function `beforeUpload` can be a Promise to check asynchronously. [demo](http://react-component.github.io/upload/examples/beforeUpload.html)
+
+
+
+
+ ![avatar]()
+
+
+
+
+
diff --git a/components/upload copy/demo/basic.vue b/components/upload copy/demo/basic.vue
new file mode 100644
index 000000000..3c9862438
--- /dev/null
+++ b/components/upload copy/demo/basic.vue
@@ -0,0 +1,65 @@
+
+---
+order: 0
+title:
+ zh-CN: 点击上传
+ en-US: Upload by clicking
+---
+
+## zh-CN
+
+经典款式，用户点击按钮弹出文件选择框。
+
+## en-US
+
+Classic mode. File selection dialog pops up when upload button is clicked.
+
+
+
+
+
+
+ Click to Upload
+
+
+
+
diff --git a/components/upload copy/demo/defaultFileList.vue b/components/upload copy/demo/defaultFileList.vue
new file mode 100644
index 000000000..0cb1fab90
--- /dev/null
+++ b/components/upload copy/demo/defaultFileList.vue
@@ -0,0 +1,70 @@
+
+---
+order: 2
+title:
+ zh-CN: 已上传的文件列表
+ en-US: Default Files
+---
+
+## zh-CN
+
+使用 `defaultFileList` 设置已上传的内容。
+
+## en-US
+
+Use `defaultFileList` for uploaded files when page init.
+
+
+
+
+
+
+ Upload
+
+
+
+
diff --git a/components/upload copy/demo/directory.vue b/components/upload copy/demo/directory.vue
new file mode 100644
index 000000000..feaacb078
--- /dev/null
+++ b/components/upload copy/demo/directory.vue
@@ -0,0 +1,35 @@
+
+---
+order: 8
+title:
+ zh-CN: 文件夹上传
+ en-US: Upload directory
+---
+
+## zh-CN
+
+支持上传一个文件夹里的所有文件。
+
+## en-US
+
+You can select and upload a whole directory.
+
+
+
+
+
+
+ Upload Directory
+
+
+
+
diff --git a/components/upload copy/demo/drag.vue b/components/upload copy/demo/drag.vue
new file mode 100644
index 000000000..6bf30241a
--- /dev/null
+++ b/components/upload copy/demo/drag.vue
@@ -0,0 +1,68 @@
+
+---
+order: 5
+title:
+ zh-CN: 拖拽上传
+ en-US: Drag and Drop
+---
+
+## zh-CN
+
+把文件拖入指定区域，完成上传，同样支持点击上传。
+
+设置 `multiple` 后，在 `IE10+` 可以一次上传多个文件。
+
+## en-US
+
+You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.
+
+We can upload serveral files at once in modern browsers by giving the input the `multiple` attribute.
+
+
+
+
+
+
+
+ Click or drag file to this area to upload
+
+ Support for a single or bulk upload. Strictly prohibit from uploading company data or other
+ band files
+
+
+
+
diff --git a/components/upload copy/demo/fileList.vue b/components/upload copy/demo/fileList.vue
new file mode 100644
index 000000000..963343540
--- /dev/null
+++ b/components/upload copy/demo/fileList.vue
@@ -0,0 +1,81 @@
+
+---
+order: 4
+title:
+ zh-CN: 完全控制的上传列表
+ en-US: Complete control over file list
+---
+
+## zh-CN
+
+使用 `fileList` 对列表进行完全控制，可以实现各种自定义功能，以下演示二种情况：
+
+1. 上传列表数量的限制。
+
+2. 读取远程路径并显示链接。
+
+## en-US
+
+You can gain full control over filelist by configuring `fileList`. You can accomplish all kinds of customed functions. The following shows two circumstances:
+
+1. limit the number of uploaded files.
+
+2. read from response and show file link.
+
+
+
+
+
+
+ Upload
+
+
+
+
diff --git a/components/upload copy/demo/index.vue b/components/upload copy/demo/index.vue
new file mode 100644
index 000000000..b1ae4e92e
--- /dev/null
+++ b/components/upload copy/demo/index.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/upload copy/demo/picture-card.vue b/components/upload copy/demo/picture-card.vue
new file mode 100644
index 000000000..34fdd976d
--- /dev/null
+++ b/components/upload copy/demo/picture-card.vue
@@ -0,0 +1,126 @@
+
+---
+order: 3
+title:
+ zh-CN: 照片墙
+ en-US: Pictures Wall
+---
+
+## zh-CN
+
+用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。
+
+## en-US
+
+After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
+
+
+
+
+
+
+
+
+ ![example]()
+
+
+
+
+
+ upload
+
+
+
+
+
+
+
+ upload
+
+
+
+
+
+
+ Select File
+
+
+
+ {{ uploading ? 'Uploading' : 'Start Upload' }}
+
+
