Loading navigation…
User
API and Development
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.
| Name | Default | Description |
|---|---|---|
label | required | The label that is displayed above the upload area. |
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 or React node displayed below the upload area to describe file limitations. | |
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. |
| 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. |
Use for standard file upload functionality with drag-and-drop and browse capabilities.
Use to limit uploads to specific file types for validation and user guidance.
Use to enforce upload constraints based on business requirements.
Use to provide specific guidance about upload requirements.
Use to prevent uploads when certain conditions are not met.
Use to display uploaded files with their current upload status.
Use to make uploaded files interactive, allowing users to preview or download them.
Use to display files without allowing removal, such as when showing existing attachments.
Use to create a full upload experience with area and status cards.