feat: upload add crossOrigin

Author: tangjinzhou

components/upload/Upload.tsx

@@ -315,6 +315,7 @@ export default defineComponent({
         typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;
       return showUploadList ? (
         <UploadList
+          prefixCls={prefixCls.value}
           listType={props.listType}
           items={mergedFileList.value}
           previewFile={previewFile}

components/upload/UploadList/ListItem.tsx

@@ -110,6 +110,7 @@ export default defineComponent({
               src={file.thumbUrl || file.url}
               alt={file.name}
               class={`${prefixCls}-list-item-image`}
+              crossOrigin={file.crossOrigin}
             />
           ) : (
             iconNode

components/upload/index.en-US.md

@@ -44,7 +44,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | previewIcon | custom preview icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 |  |
 | progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 3.0 |  |
 | removeIcon | custom remove icon | v-slot:iconRender="{file: UploadFile}" | - | 3.0 |  |
-| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`,  `showRemoveIcon` and `showDownloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) |  |
+| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean } | true | showDownloadIcon(3.0) |  |
 | supportServerRender | Need to be turned on while the server side is rendering. | boolean | false |  |  |
 | withCredentials | ajax upload with cookie sent | boolean | false |  |  |
 
@@ -63,14 +63,15 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 
 Extends File with additional props.
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| name | File name | string | - |
-| percent | Upload progress percent | number | - |
-| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - |
-| thumbUrl | Thumb image url | string | - |
-| uid | unique id. Will auto generate when not provided | string | - |
-| url | Download url | string | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.3.0 |
+| name | File name | string | - |  |
+| percent | Upload progress percent | number | - |  |
+| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - |  |
+| thumbUrl | Thumb image url | string | - |  |
+| uid | unique id. Will auto generate when not provided | string | - |  |
+| url | Download url | string | - |  |
 
 ### change
 
@@ -125,3 +126,11 @@ See <https://github.com/react-component/upload#customrequest>.
 ### Why does `change` sometimes return File object and other times return { originFileObj: File }?
 
 For compatible case, we return File object when `beforeUpload` return `false`. It will merge to `{ originFileObj: File }` in next major version. Current version is compatible to get origin file by `info.file.originFileObj`. You can change this before major release.
+
+### Why sometime Chrome can not upload?
+
+Chrome update will also break native upload. Please restart chrome to finish the upload work. Ref:
+
+- [#32672](https://github.com/ant-design/ant-design/issues/32672)
+- [#32913](https://github.com/ant-design/ant-design/issues/32913)
+- [#33988](https://github.com/ant-design/ant-design/issues/33988)

components/upload/index.zh-CN.md

@@ -64,14 +64,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
 
 继承自 File，附带额外属性用于渲染。
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| name | 文件名 | string | - |
-| percent | 上传进度 | number | - |
-| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - |
-| thumbUrl | 缩略图地址 | string | - |
-| uid | 唯一标识符，不设置时会自动生成 | string | - |
-| url | 下载地址 | string | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.3.0 |
+| name | 文件名 | string | - | - |
+| percent | 上传进度 | number | - | - |
+| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
+| thumbUrl | 缩略图地址 | string | - | - |
+| uid | 唯一标识符，不设置时会自动生成 | string | - | - |
+| url | 下载地址 | string | - | - |
 
 ### change
 
@@ -126,3 +127,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
 ### `onChange` 为什么有时候返回 File 有时候返回 { originFileObj: File }？
 
 历史原因，在 `beforeUpload` 返回 `false` 时，会返回 File 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 File 写法。你可以提前切换。
+
+### 为何有时 Chrome 点击 Upload 无法弹出文件选择框？
+
+与 antd 无关，原生上传也会失败。请重启 Chrome 浏览器，让其完成升级工作。相关 issue：
+
+- [#32672](https://github.com/ant-design/ant-design/issues/32672)
+- [#32913](https://github.com/ant-design/ant-design/issues/32913)
+- [#33988](https://github.com/ant-design/ant-design/issues/33988)

components/upload/interface.tsx

@@ -27,6 +27,7 @@ export interface UploadFile<T = any> {
   status?: UploadFileStatus;
   percent?: number;
   thumbUrl?: string;
+  crossOrigin?: HTMLImageElement['crossOrigin'];
   originFileObj?: FileType;
   response?: T;
   error?: any;
@@ -49,7 +50,7 @@ export interface ShowUploadListInterface {
 export interface UploadChangeParam<T = UploadFile> {
   // https://github.com/ant-design/ant-design/issues/14420
   file: T;
-  fileList: UploadFile[];
+  fileList: T[];
   event?: { percent: number };
 }
 

components/upload/style/index.less

@@ -168,9 +168,11 @@
       &-btn {
         opacity: 0;
       }
+
       &-btn.@{ant-prefix}-btn-sm {
-        height: 20px;
+        height: @line-height-base * @font-size-base;
         line-height: 1;
+        vertical-align: top;
       }
 
       &.picture {
@@ -185,12 +187,16 @@
 
       .@{iconfont-css-prefix} {
         color: @upload-actions-color;
+        transition: all 0.3s;
+      }
+
+      &:hover .@{iconfont-css-prefix} {
+        color: @text-color;
       }
     }
 
     &-info {
       height: 100%;
-      padding: 0 4px;
       transition: background-color 0.3s;
 
       > span {
@@ -210,30 +216,10 @@
       }
     }
 
-    .@{iconfont-css-prefix}-close {
-      position: absolute;
-      top: 6px;
-      right: 4px;
-      color: @text-color-secondary;
-      font-size: 10px;
-      line-height: 0;
-      cursor: pointer;
-      opacity: 0;
-      transition: all 0.3s;
-
-      &:hover {
-        color: @text-color;
-      }
-    }
-
     &:hover &-info {
       background-color: @item-hover-bg;
     }
 
-    &:hover .@{iconfont-css-prefix}-close {
-      opacity: 1;
-    }
-
     &:hover &-card-actions-btn {
       opacity: 1;
     }
@@ -369,14 +355,6 @@
       margin-top: 0;
       padding-left: 56px;
     }
-
-    .@{iconfont-css-prefix}-close {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      line-height: 1;
-      opacity: 1;
-    }
   }
 
   // ======================== Picture Card ========================
@@ -389,10 +367,6 @@
       vertical-align: top;
     }
 
-    &.@{upload-prefix-cls}-list::after {
-      display: none;
-    }
-
     .@{upload-item} {
       height: 100%;
       margin: 0;

components/upload/style/index.tsx

@@ -2,6 +2,7 @@ import '../../style/index.less';
 import './index.less';
 
 // style dependencies
+// deps-lint-skip: form
 import '../../button/style';
 import '../../progress/style';
 import '../../tooltip/style';

components/upload/style/rtl.less

@@ -72,13 +72,6 @@
       }
     }
 
-    .@{iconfont-css-prefix}-close {
-      .@{upload-prefix-cls}-list-rtl & {
-        right: auto;
-        left: 4px;
-      }
-    }
-
     &-error &-card-actions {
       .@{iconfont-css-prefix} {
         .@{upload-prefix-cls}-list-rtl & {
@@ -145,13 +138,6 @@
         padding-left: 0;
       }
     }
-
-    .@{iconfont-css-prefix}-close {
-      .@{upload-prefix-cls}-list-rtl& {
-        right: auto;
-        left: 8px;
-      }
-    }
   }
 
   &-picture-card {