mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

feat: crossorigin attribute of Upload (#34981)

Browse Source 
* feat: Add crossOrigin prop to thumbnail image

* feat: Add test cases about crossOrigin prop of Upload component

* doc: Add a description about crossOrigin prop to Upload component manual

* Update components/upload/interface.tsx

Update type definition using React.ImgHTMLAttributes

Co-authored-by: afc163 <afc163@gmail.com>

Co-authored-by: hyunseok.kim <hyunseok.kim@42dot.ai>
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
Hyunseok.Kim 2022-04-12 13:03:46 +09:00 committed by GitHub
parent 227036fac5
commit 62b221269d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 134 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/upload/UploadList/ListItem.tsx
View File

@ -104,6 +104,7 @@ const ListItem = React.forwardRef(
src={file.thumbUrl || file.url}
alt={file.name}
className={`${prefixCls}-list-item-image`}
crossOrigin={file.crossOrigin}
/>
) : (
iconNode

130
components/upload/__tests__/uploadlist.test.js
View File

@ -1240,4 +1240,134 @@ describe('Upload List', () => {
const wrapper = mount(<Upload fileList={null} />);
wrapper.unmount();
});
it('should not exist crossorigin attribute when does not set file.crossorigin in case of listType="picture"', () => {
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',
},
];
const wrapper = mount(
<Upload fileList={list} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((file, i) => {
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
expect(imgNode.prop('crossOrigin')).toBe(undefined);
expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
});
wrapper.unmount();
});
it('should exist crossorigin attribute when set file.crossorigin in case of listType="picture"', () => {
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',
crossOrigin: '',
},
{
uid: '1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'anonymous',
},
{
uid: '2',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'use-credentials',
},
];
const wrapper = mount(
<Upload fileList={list} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((file, i) => {
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
expect(imgNode.prop('crossOrigin')).not.toBe(undefined);
expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
});
wrapper.unmount();
});
it('should not exist crossorigin attribute when does not set file.crossorigin in case of listType="picture-card"', () => {
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',
},
];
const wrapper = mount(
<Upload fileList={list} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((file, i) => {
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
expect(imgNode.prop('crossOrigin')).toBe(undefined);
expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
});
wrapper.unmount();
});
it('should exist crossorigin attribute when set file.crossorigin in case of listType="picture-card"', () => {
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',
crossOrigin: '',
},
{
uid: '1',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'anonymous',
},
{
uid: '2',
name: 'xxx.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png',
crossOrigin: 'use-credentials',
},
];
const wrapper = mount(
<Upload fileList={list} listType="picture">
<button type="button">upload</button>
</Upload>,
);
list.forEach((file, i) => {
const imgNode = wrapper.find('.ant-upload-list-item-thumbnail img').at(i);
expect(imgNode.prop('crossOrigin')).not.toBe(undefined);
expect(imgNode.prop('crossOrigin')).toBe(file.crossOrigin);
});
wrapper.unmount();
});
});

1
components/upload/index.en-US.md
View File

@ -60,6 +60,7 @@ Extends File with additional props.
| thumbUrl | Thumb image url | string | - |
| uid | unique id. Will auto generate when not provided | string | - |
| url | Download url | string | - |
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - |
### onChange

1
components/upload/index.zh-CN.md
View File

@ -61,6 +61,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
| thumbUrl | 缩略图地址 | string | - |
| uid | 唯一标识符，不设置时会自动生成 | string | - |
| url | 下载地址 | string | - |
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - |
### onChange

1
components/upload/interface.tsx
View File

@ -27,6 +27,7 @@ export interface UploadFile<T = any> {
status?: UploadFileStatus;
percent?: number;
thumbUrl?: string;
crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
originFileObj?: RcFile;
response?: T;
error?: any;