diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index aff037846..290afb9b8 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -315,6 +315,7 @@ export default defineComponent({
typeof showUploadList === 'boolean' ? ({} as ShowUploadListInterface) : showUploadList;
return showUploadList ? (
) : (
iconNode
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index 760340835..e1e868dbd 100644
--- a/components/upload/index.en-US.md
+++ b/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 .
### 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)
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index 73c2e47f0..fb206770f 100644
--- a/components/upload/index.zh-CN.md
+++ b/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)
diff --git a/components/upload/interface.tsx b/components/upload/interface.tsx
index 8e5d56322..cabe9fbec 100755
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@@ -27,6 +27,7 @@ export interface UploadFile {
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 {
// https://github.com/ant-design/ant-design/issues/14420
file: T;
- fileList: UploadFile[];
+ fileList: T[];
event?: { percent: number };
}
diff --git a/components/upload/style/index.less b/components/upload/style/index.less
index 49ba7f211..80c067220 100644
--- a/components/upload/style/index.less
+++ b/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;
diff --git a/components/upload/style/index.tsx b/components/upload/style/index.tsx
index 582def0cc..591032d5d 100644
--- a/components/upload/style/index.tsx
+++ b/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';
diff --git a/components/upload/style/rtl.less b/components/upload/style/rtl.less
index 0dd9836ef..a7054731f 100644
--- a/components/upload/style/rtl.less
+++ b/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 {