Upload

Used to select and upload files or drag and drop files.

When to use

Uploading is the process of publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool.

When you need to upload one or more files.
When you need to show the process of uploading.
When you need to upload files by dragging and dropping.

Examples

Upload by clicking

Classic mode. File selection dialog pops up when upload button is clicked.

Default Files

Use defaultFileList for uploaded files when page init.

Pictures with picture-circle type

Alternative display for picture-card.

Drag and Drop

You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting. We can upload several files at once in modern browsers by giving the input the multiple attribute.

Upload directory

You can select and upload a whole directory. Can still select files when uploading a folder in Safari?

Upload png file only

beforeUpload only prevent upload behavior when return false or reject promise, the prevented file would still show in file list. Here is the example you can keep prevented files out of list by return UPLOAD.LIST_IGNORE.

Customize preview file

Customize local preview. Can handle with non-image format files such as video.

Transform file before request

Use beforeUpload for transform file before request such as add a watermark.

Custom action icon and extra info

Use showUploadList for custom action icons and extra information of files.

Crop image before uploading

Crop an image before uploading it.

Custom semantic dom styling

You can customize the semantic dom style of Upload components by passing objects/functions through classNames and styles.

Avatar

Click to upload user's avatar, and validate size and format of picture with beforeUpload. > The return value of function beforeUpload can be a Promise to check asynchronously. demo

Pictures Wall

After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.

Complete control over file list

You can gain full control over filelist by configuring fileList. You can accomplish all kinds of customized functions. The following shows two circumstances: 1. limit the number of uploaded files. 2. read from response and show file link.

Paste

Copy the file and paste it anywhere on the page to upload.

Upload manually

Upload files manually after beforeUpload returns false.

Pictures with list style

If uploaded file is a picture, the thumbnail can be shown. IE8/9 do not support local thumbnail show. Please use thumbUrl instead.

Max Count

Limit files with maxCount. Will replace current one when maxCount is 1.

Object storage

Upload straight to an object store with a signed policy.

Drag sorting of uploadList

By using itemRender, we can integrate upload with dnd-kit to implement drag sorting of uploadList.

Customize Progress Bar

Use progress for customize progress bar.

API

Upload and Upload.Dragger are exported from @ceebee/ui/client.

Upload

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[]](#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. 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.	`boolean`	`false`	—
`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`	`-`	—

RcFile

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

UploadFile

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

RequestOptions {#request-options}

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

AcceptObject

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`	`-`	—