Importimport { Upload } from 'antd'; |
contributors
Importimport { Upload } from 'antd'; |
Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| accept | File types that can be accepted. See input accept Attribute | string | 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: RcFile, fileList: RcFile[]) => 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, info: { defaultRequest: (option: RequestOptions) => void; } ) => void | - | defaultRequest: 5.28.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| data | Uploading extra params or function which can return uploading extra params | object | (file) => object | Promise<object> | - | |
| defaultFileList | Default list of files that have been uploaded | object[] | - | |
| directory | Support upload whole directory (caniuse) | boolean | false | |
| disabled | Disable upload button | boolean | false | When customizing Upload children, please pass the disabled attribute to the child node at the same time to ensure the disabled rendering effect is consistent. |
| fileList | List of files that have been uploaded (controlled). Here is a common issue #2423 when using it | UploadFile[] | - | |
| headers | Set request headers, valid above IE10 | object | - | |
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| isImageUrl | Customize if render <img /> in thumbnail | (file: UploadFile) => boolean | (inside implementation) | |
| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList: object[], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.16.0 |
| listType | Built-in stylesheets, support for four types: text, picture, picture-card or picture-circle | string | text | picture-circle(5.2.0+) |
| maxCount | Limit the number of uploaded files. Will replace current one when maxCount is 1 | number | - | 4.10.0 |
| method | The http method of upload request | string | post | |
| multiple | Whether to support selected multiple files. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | |
| name | The name of uploading file | string | file | |
| openFileDialogOnClick | Click open file dialog | boolean | true | |
| pastable | Support paste file | boolean | false | 5.25.0 |
| previewFile | Customize preview file logic | (file: File | Blob) => Promise<dataURL: string> | - | |
| progress | Custom progress bar | ProgressProps (support type="line" only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
| showUploadList | Whether to show default upload list, could be an object to specify extra, showPreviewIcon, showRemoveIcon, showDownloadIcon, removeIcon and downloadIcon individually | boolean | { extra?: ReactNode | (file: UploadFile) => ReactNode, showPreviewIcon?: boolean | (file: UploadFile) => boolean, showDownloadIcon?: boolean | (file: UploadFile) => boolean, showRemoveIcon?: boolean | (file: UploadFile) => boolean, previewIcon?: ReactNode | (file: UploadFile) => ReactNode, removeIcon?: ReactNode | (file: UploadFile) => ReactNode, downloadIcon?: ReactNode | (file: UploadFile) => ReactNode } | true | extra: 5.20.0, showPreviewIcon function: 5.21.0, showRemoveIcon function: 5.21.0, showDownloadIcon function: 5.21.0 |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| withCredentials | The ajax upload with cookie sent | boolean | false | |
| onChange | A callback function, can be executed when uploading state is changing. It will trigger by every uploading phase. see onChange | function | - | |
| onDrop | A callback function executed when files are dragged and dropped into the upload area | (event: React.DragEvent) => void | - | 4.16.0 |
| onDownload | Click the method to download the file, pass the method to perform the method logic, and do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) | |
| 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 | - |
Extends File.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| uid | unique id. Will auto-generate when not provided | string | - | - |
| lastModifiedDate | A Date object indicating the date and time at which the file was last modified | date | - | - |
Extends File with additional props.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| crossOrigin | CORS settings attributes | 'anonymous' | 'use-credentials' | '' | - | 4.20.0 |
| name | File name | string | - | - |
| percent | Upload progress percent | number | - | - |
| status | Upload status. Show different style when configured | error | 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 |
|---|---|---|---|---|
| action | Uploading URL | string | - | - |
| data | Uploading extra params or function which can return uploading extra params | Record<string, unknown> | - | 4.20.0 |
| filename | file name | string | - | - |
| file | File object containing upload information | UploadFile | - | - |
| withCredentials | The ajax upload with cookie sent | boolean | - | - |
| headers | Set request headers, valid above IE10 | Record<string, string> | - | - |
| method | The http method of upload request | string | - | - |
| onProgress | Progress event callback | (event: object, file: UploadFile) => void | - | - |
| onError | Error callback when upload fails | (event: object, body?: object) => void | - | - |
| onSuccess | Success callback when upload completes | (body: object, fileOrXhr?: UploadFile | XMLHttpRequest) => void | - | - |
💡 The function will be called when uploading is in progress, completed, or failed.
When uploading state change, it returns:
{file: { /* ... */ },fileList: [ /* ... */ ],event: { /* ... */ },}
file File object for the current operation.
{uid: 'uid', // unique identifier, negative is recommended, to prevent interference with internally generated idname: 'xx.png', // file namestatus: 'done' | 'uploading' | 'error' | 'removed', // Intercepted file by beforeUpload doesn't have a status field.response: '{"status": "success"}', // response from serverlinkProps: '{"download": "image"}', // additional HTML props of file linkxhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header}
fileList current list of files
event response from the server, including uploading progress, supported by advanced browsers.
{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 | 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 | - |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| actionsColor | Action button color | string | rgba(0,0,0,0.45) |
| pictureCardSize | Size of list items in card type (affects both picture-card and picture-circle) | number | 102 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgMask | The background color of the mask, used to cover the content below the mask, Modal, Drawer, Image and other components use this token | string | rgba(0,0,0,0.45) |
| colorBorder | Default border color, used to separate different elements, such as: form separator, card separator, etc. | string | #d9d9d9 |
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorErrorBg | The background color of the error state. | string | #fff2f0 |
| colorFillAlter | Control the alternative background color of element. | string | rgba(0,0,0,0.02) |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorPrimaryBorder | The stroke color under the main color gradient, used on the stroke of components such as Slider. | string | #91caff |
| colorPrimaryHover | Hover state under the main color gradient. | string | #4096ff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextDisabled | Control the color of text in disabled state. | string | rgba(0,0,0,0.25) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| colorTextLightSolid | Control the highlight color of text with background color, such as the text in Primary Button components. | string | #fff |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| borderRadiusSM | SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size | number | 4 |
| controlItemBgHover | Control the background color of control component item when hovering. | string | rgba(0,0,0,0.04) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeHeading2 | Font size of h2 tag. | string | number | 30 |
| fontSizeHeading3 | Font size of h3 tag. | string | number | 24 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthFocus | Control the width of the line when the component is in focus state. | number | 3 |
| margin | Control the margin of an element, with a medium size. | number | 16 |
| marginXL | Control the margin of an element, with an extra-large size. | number | 32 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| motionEaseInOut | Preset motion curve. | string | |
| motionEaseInOutCirc | Preset motion curve. | string | |
| padding | Control the padding of the element. | number | 16 |
| paddingSM | Control the small padding of the element. | number | 12 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
Please set property url of each item in fileList to control the content of the link.
customRequest?See https://github.com/react-component/upload#customrequest.
fileList that's in control not trigger onChange status update when the file is not in the list?onChange will only trigger when the file is in the list, it will ignore any events removed from the list. Please note that there does exist a bug which makes an event still trigger even when the file is not in the list before 4.13.0.
onChange 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 the next major version. Current version is compatible to get origin file by info.file.originFileObj. You can change this before a major release.
Chrome update will also break native upload. Please restart Chrome to finish the upload job.
Ref:
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. You can solve this issue through accept configuration, for example:
accept = {// Do not allow selecting any filesformat: `.${'n'.repeat(100)}`,// Accept all files within the folder after folder selectionfilter: () => true,};
Click or drag file to this area to upload
Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files.
