Attachments

A drop area for files that lists them as cards once they are added, for attaching files to a chat message.

Basic

Pass placeholder an icon, title and description to fill the drop area, and return false from beforeUpload to keep files in the browser.

File list

Control the files with items and onChange, and each one shows as a card with its progress while uploading or its message when it fails.

Overflow

Set overflow to scrollX to keep many files on one row, with arrows to scroll through them.

Drop placeholder

Pass placeholder a function to show different text while a file is dragged over the area, when it receives drop.

Pick by type

Call select on the ref with an accept list to open the file dialog for one kind of file, and cap the list with maxCount.

Disabled

Set disabled to show the files without the add button or the remove buttons.

In context

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

Chat attachments

A chat input with a paperclip button that opens a header holding the attached files.

File analysis

A file-analysis screen where uploads show their progress and the Start analysis button waits until every file is done.

Support ticket

A support ticket form with a subject, a category and a details field, plus screenshots attached before sending.

Email composer

An email draft with its attached files under the message, a paperclip button to add more and a Send button.