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.