File Upload

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

FileUpload is used to enable users to upload files through drag-and-drop or file browsing, with support for file type restrictions, size limits, and upload status tracking. It provides a comprehensive file upload experience consisting of two main components: FileUploadArea for selecting and dropping files, and FileUploadCard for displaying uploaded files with status indicators. Together, they create an intuitive interface for managing file uploads with validation and visual feedback.

FileUploadArea Props

Name	Default	Description
`label`	`required`	The label that is displayed above the upload area. `LocalizedMessage` from `formatMessage`.
`disabled`	`false`	Whether the upload area is disabled.
`filesAdded`	`required`	Array of File objects that have been added to the upload area.
`fileTypes`		Array of MIME types that are allowed to be uploaded (e.g., `["image/*", "application/pdf"]`).
`limitationsText`		Custom text displayed below the upload area to describe file limitations. `LocalizedMessage` from `formatMessage`.
`maxFiles`		The maximum number of files that can be uploaded.
`maxFileSize`		The maximum file size per file in bytes.
`maxTotalUploadSize`		The maximum total file size in bytes that can be uploaded.
`onFilesAdded`		Callback function called when files are added. Receives `(files: Array<File>, state: Array<File>)` where `files` are the newly added files and `state` is the complete file array.

FileUploadCard Props

Name	Default	Description
`filename`	`required`	The name of the file to display.
`size`		The file size as a number (in bytes) or formatted string (e.g., "1.8 MB").
`status`	`required`	Enum for upload status. Variations of `UploadStatus` include `Uploading \| Success \| Error`.
`onRemove`		Callback function called when the remove button is clicked.
`onClick`		Callback function called when the card is clicked, making the card interactive.
`maxWidth`	`"32rem"`	Maximum width constraint for the card.

Basic Upload Area

Use for standard file upload functionality with drag-and-drop and browse capabilities.

With File Type Restrictions

Use to limit uploads to specific file types for validation and user guidance.

With File Count and Size Limits

Use to enforce upload constraints based on business requirements.

With Custom Limitations Text

Use to provide specific guidance about upload requirements.

Disabled Upload Area

Use to prevent uploads when certain conditions are not met.

Upload Cards with Status

Use to display uploaded files with their current upload status.

Clickable Upload Cards

Use to make uploaded files interactive, allowing users to preview or download them.

Read-Only Upload Cards

Use to display files without allowing removal, such as when showing existing attachments.

Complete Upload Flow

Use to create a full upload experience with area and status cards.

File Upload / Usage

Accessibility / Keyboard Support

On this page

FileUploadArea Props

FileUploadCard Props

Basic Upload Area

With File Type Restrictions

With File Count and Size Limits

With Custom Limitations Text

Disabled Upload Area

Upload Cards with Status

Clickable Upload Cards

Read-Only Upload Cards

Complete Upload Flow

File Upload

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

FileUploadArea Props

Name	Default	Description
`label`	`required`	The label that is displayed above the upload area. `LocalizedMessage` from `formatMessage`.
`disabled`	`false`	Whether the upload area is disabled.
`filesAdded`	`required`	Array of File objects that have been added to the upload area.
`fileTypes`		Array of MIME types that are allowed to be uploaded (e.g., `["image/*", "application/pdf"]`).
`limitationsText`		Custom text displayed below the upload area to describe file limitations. `LocalizedMessage` from `formatMessage`.
`maxFiles`		The maximum number of files that can be uploaded.
`maxFileSize`		The maximum file size per file in bytes.
`maxTotalUploadSize`		The maximum total file size in bytes that can be uploaded.
`onFilesAdded`		Callback function called when files are added. Receives `(files: Array<File>, state: Array<File>)` where `files` are the newly added files and `state` is the complete file array.

FileUploadCard Props

Name	Default	Description
`filename`	`required`	The name of the file to display.
`size`		The file size as a number (in bytes) or formatted string (e.g., "1.8 MB").
`status`	`required`	Enum for upload status. Variations of `UploadStatus` include `Uploading \| Success \| Error`.
`onRemove`		Callback function called when the remove button is clicked.
`onClick`		Callback function called when the card is clicked, making the card interactive.
`maxWidth`	`"32rem"`	Maximum width constraint for the card.