feat: crossorigin attribute of Upload (#34981)

* 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>

components/upload/UploadList/ListItem.tsx

@@ -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

components/upload/__tests__/uploadlist.test.js

@@ -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();
+  });
 });

components/upload/index.en-US.md

@@ -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
 

components/upload/index.zh-CN.md

@@ -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
 

components/upload/interface.tsx

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