feat: Upload accept support config (#55543)

* feat: Upload support acceptObject

* docs: update docs

* test: update snapshot

---------

Co-authored-by: lijianan <574980606@qq.com>

components/upload/index.en-US.md

@@ -51,7 +51,7 @@ Common props ref：[Common props](/docs/react/common-props)
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
+| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string \| [AcceptObject](#acceptobject) | - |  |
 | action | Uploading URL | string \| (file) => Promise<string> | - |  |
 | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. When returned value is `Upload.LIST_IGNORE`, the list of files that have been uploaded will ignore it. **Warning：this function is not supported in IE9** | (file, fileList) => boolean \| Promise<File> \| `Upload.LIST_IGNORE` | - |  |
 | customRequest | Override for the default xhr behavior allowing for additional customization and the ability to implement your own XMLHttpRequest | ( options: [RequestOptions](#request-options), info: { defaultRequest: (option: [RequestOptions](#request-options)) => void; } ) => void | - | defaultRequest: 5.28.0 |
@@ -83,6 +83,8 @@ Common props ref：[Common props](/docs/react/common-props)
 | onPreview | A callback function, will be executed when the file link or preview icon is clicked | function(file) | - |  |
 | onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when the return value is false or a Promise which resolve(false) or reject | function(file): boolean \| Promise | - |  |
 
+## Interface
+
 ### UploadFile
 
 Extends File with additional props.
@@ -143,6 +145,22 @@ When uploading state change, it returns:
 
 3. `event` response from the server, including uploading progress, supported by advanced browsers.
 
+### AcceptObject
+
+```typescript
+{
+  format: string;
+  filter?: 'native' | ((file: RcFile) => boolean);
+}
+```
+
+Configuration object for file type acceptance rules.
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| format | Accepted file types, same as native input accept attribute. Supports MIME types, file extensions, etc. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
+| filter | File filtering rule. When set to `'native'`, uses browser native filtering behavior; when set to a function, allows custom filtering logic. Function returns `true` to accept the file, `false` to reject | `'native'` \| `(file: RcFile) => boolean` | - |  |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
@@ -189,8 +207,13 @@ Ref:
 
 ### Can still select files when uploading a folder in Safari?
 
-Inside the upload component, we use the `directory` and `webkitdirectory` properties to control only directories can be selected. However, in Safari's implementation it doesn't seem to work. See [here](https://stackoverflow.com/q/55649945/3040605). Please try passing an additional `accept` attribute that cannot match any files. For example:
+Inside the upload component, we use the `directory` and `webkitdirectory` properties to control the input to implement folder selection, but it seems that in Safari's implementation, [it doesn't prevent users from selecting files](https://stackoverflow.com/q/55649945/3040605). You can solve this issue through `accept` configuration, for example:
 
-```jsx
-accept: `.${'n'.repeat(100)}`;
+```tsx
+accept = {
+  // Do not allow selecting any files
+  format: `.${'n'.repeat(100)}`,
+  // Accept all files within the folder after folder selection
+  filter: () => true,
+};
 ```

components/upload/index.zh-CN.md

@@ -52,7 +52,7 @@ demo:
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| accept | 接受上传的文件类型，详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
+| accept | 接受上传的文件类型，详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string \| [AcceptObject](#acceptobject) | - |  |
 | action | 上传的地址 | string \| (file) => Promise<string> | - |  |
 | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）；也可以返回 `Upload.LIST_IGNORE`，此时列表中将不展示此文件。 **注意：IE9 不支持该方法** | (file, fileList) => boolean \| Promise<File> \| `Upload.LIST_IGNORE` | - |  |
 | customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | ( options: [RequestOptions](#request-options), info: { defaultRequest: (option: [RequestOptions](#request-options)) => void; } ) => void | - | defaultRequest: 5.28.0 |
@@ -84,6 +84,8 @@ demo:
 | onPreview | 点击文件链接或预览图标时的回调 | function(file) | - |  |
 | onRemove | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除 | function(file): boolean \| Promise | - |  |
 
+## Interface
+
 ### UploadFile
 
 继承自 File，附带额外属性用于渲染。
@@ -143,6 +145,22 @@ demo:
 
 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。
 
+### AcceptObject
+
+```typescript
+{
+  format: string;
+  filter?: 'native' | ((file: RcFile) => boolean);
+}
+```
+
+用于配置文件类型接受的规则对象。
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| format | 接受的文件类型，与原生 input accept 属性相同，支持 MIME 类型、文件扩展名等格式。详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
+| filter | 文件过滤规则。设置为 `'native'` 时使用浏览器原生过滤行为；设置为函数时可以自定义过滤逻辑，函数返回 `true` 表示接受该文件，返回 `false` 表示拒绝 | `'native'` \| `(file: RcFile) => boolean` | - |  |
+
 ## Semantic DOM
 
 <code src="./demo/_semantic.tsx" simplify="true"></code>
@@ -189,8 +207,13 @@ demo:
 
 ### 文件夹上传在 Safari 仍然可以选中文件?
 
-组件内部是以 `directory`、`webkitdirectory` 属性控制 input 来实现文件夹选择的, 但似乎在 Safari 的实现中，[并不会阻止用户选择文件](https://stackoverflow.com/q/55649945/3040605)，请尝试额外传递无法匹配文件的 `accept` 属性来规避此问题 例如:
+组件内部是以 `directory`、`webkitdirectory` 属性控制 input 来实现文件夹选择的, 但似乎在 Safari 的实现中，[并不会阻止用户选择文件](https://stackoverflow.com/q/55649945/3040605)。可以通过 `accept` 配置来解决此问题，例如：
 
-```jsx
-accept: `.${'n'.repeat(100)}`;
+```tsx
+accept = {
+  // 不允许选择任何文件
+  format: `.${'n'.repeat(100)}`,
+  // 当选择文件夹后，接受所有文件夹内的文件
+  filter: () => true,
+};
 ```

components/upload/interface.ts

@@ -1,5 +1,6 @@
 import type * as React from 'react';
 import type {
+  AcceptConfig,
   RcFile as OriRcFile,
   UploadRequestOption as RcCustomRequestOptions,
   UploadProps as RcUploadProps,
@@ -111,7 +112,7 @@ export interface UploadProps<T = any>
   headers?: HttpRequestHeader;
   showUploadList?: boolean | ShowUploadListInterface<T>;
   multiple?: boolean;
-  accept?: string;
+  accept?: string | AcceptConfig;
   beforeUpload?: (
     file: RcFile,
     fileList: RcFile[],

package.json

@@ -150,7 +150,7 @@
     "@rc-component/tree": "~1.0.1",
     "@rc-component/tree-select": "~1.3.0",
     "@rc-component/trigger": "^3.6.15",
-    "@rc-component/upload": "~1.0.0",
+    "@rc-component/upload": "~1.1.0",
     "@rc-component/util": "^1.3.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",

scripts/__snapshots__/check-site.ts.snap

@@ -272,9 +272,9 @@ exports[`site test Component components/typography en Page 1`] = `6`;
 
 exports[`site test Component components/typography zh Page 1`] = `6`;
 
-exports[`site test Component components/upload en Page 1`] = `3`;
+exports[`site test Component components/upload en Page 1`] = `4`;
 
-exports[`site test Component components/upload zh Page 1`] = `3`;
+exports[`site test Component components/upload zh Page 1`] = `4`;
 
 exports[`site test Component components/watermark en Page 1`] = `2`;