FileUpload

The FileUpload component allows users to upload files with validation options such as size, type, and progress feedback.

Usage & Examples

Default

default.tsx
<FileUpload label="Upload your document" onSubmit={...}/>

Props API

56 props
Columns
FileUpload props API
Default
Description
allowedFileTypesstring[]Noprops[]Allowed file MIME types or file extensions (e.g. ".pdf", "image/png").
controlRoundingRoundingTypeNopropsconfigured default rounding (fallback: "medium")Rounding of the control button ('none' | 'small' | 'medium' | 'large' | 'full').
controlShadowShadowTypeNopropsShadow of the control button ('none' | 'light' | 'medium' | 'strong' | 'intense').
data-testidstringNotestingBackward-compatible alias for test ID attributes.
descriptionClassNamestringNopropsAdditional class names for the FormGroup description.
disabledbooleanNopropsfalseWhether to disable the file input.
dropzoneClassNamestringNopropsAdditional class names for the dropzone/root wrapper.
dropzoneDescriptionstringNopropsOptional custom instructions for drag-and-drop users and assistive tech.
dropzoneRole"button" | "group" | "region"Noprops"group"Whether the dropzone should expose a button-like role.
enableDragAndDropbooleanNopropstrueWhether drag and drop is enabled.
errorMessagestringNopropsOptional error message.
errorMessageClassNamestringNopropsAdditional class names for the FormGroup error message.