Upload

Files chosen from a picker or dropped onto a target, with a list of what is uploading, what succeeded and what failed.

Basic

Wrap a button in Upload to open the file picker, and each chosen file appears in a list below it while it uploads.

Default file list

Pass defaultFileList to start with files already listed, each showing its status: done, uploading or failed.

Picture list

Set listType="picture" to show a thumbnail beside each file name, for images like a cover or a banner.

Picture card

Set listType="picture-card" for a grid of image tiles with an add tile at the end, and preview a tile with onPreview.

Picture circle

Set listType="picture-circle" for round image tiles, like the profile photos of a team.

Drag and drop

Use Upload.Dragger for a drop zone that takes files dragged onto it as well as clicks, one file or many.

Directory

Set directory to pick a whole folder, and every file inside it is added to the list.

Max count

Set maxCount={1} to keep a single file, so a new pick replaces the old one instead of being rejected.

Hide when full

Set maxCount with multiple and hide the trigger once the list holds that many files, here three.

Paste

Set pastable to add an image from the clipboard when the reader pastes it with a keyboard shortcut.

Manual upload

Return false from beforeUpload to collect files without sending them, then upload the whole list with a button.

PNG only

Return Upload.LIST_IGNORE from beforeUpload to reject a file before it reaches the list, here anything that is not a PNG.

Custom list actions

Pass showUploadList an object to choose which actions each file shows and to add extra text, like a status beside the name.

Avatar uploader

A round upload that checks the file type and size in beforeUpload and shows the chosen image as an Avatar inside a ring.

In context

The component inside real screens, with the components it usually sits beside.

Attachments

An attachments card with a drop zone, a progress bar per file, a remove button and the total size of everything attached.

API Reference

Upload
Upload's props. Rows marked antuikit in the Version column are added by the kit.
UploadFile
The shape of each entry in fileList and defaultFileList.
onChange
What onChange receives, as { file, fileList, event }.