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').
controlShadowShadowTypeNopropsconfigured default shadow (fallback: "light")Shadow of the control button ('none' | 'light' | 'medium' | 'strong' | 'intense').
data-testidstringNotestingBackward-compatible alias for test ID attributes.
descriptionstringNopropsOptional description text under the label.
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.
errorstringNopropsOptional error message.