FileUpload

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

Usage

Default

Upload your document

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

Props

Data table
	Type	Description
allowedFileTypes	string[]	Allowed file MIME types or file extensions (e.g. ".pdf", "image/png").
controlRounding	RoundingType	Rounding of the control button ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
controlShadow	ShadowType	Shadow of the control button ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
data-testid	string	Optional test ID for testing frameworks.
description	string	Optional description text under the label.
disabled	boolean	Whether to disable the file input.
dropzoneDescription	string	Optional custom instructions for drag-and-drop users and assistive tech.
dropzoneRole	"button" \| "group" \| "region"	Whether the dropzone should expose a button-like role.
enableDragAndDrop	boolean	Whether drag and drop is enabled.
error	string	Optional error message.
failureMessage	string	Status message announced when upload fails.
fileListAriaLabel	string	Accessible label for the selected files list.
fileRemovedMessage	((fileName: string, index: number) => string)	Message announced when a file is removed.
filesSelectedMessage	((files: File[]) => string)	Message announced when files are selected.
id	string	Optional custom id for the root/input relationship.
inputAriaLabel	string	Accessible label for the hidden native file input when no visible label is used.
label	string	Label displayed above the file input.
liveRegionPoliteness	"off" \| "polite" \| "assertive"	Live region politeness for status updates.
maxFileSizeBytes	number	Maximum file size in bytes (e.g., 5MB = 5 * 1024 * 1024).
multiple	boolean	Allows multiple file selection if true.
onFilesChange	((files: File[]) => void)	Called whenever selected files change.
onSubmit	(files: File[]) => void \| Promise<void>	Called after upload completes.
outline	boolean	Whether to display the control button as an outline.
outlineRounding	RoundingType	Rounding of the wrapping element ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
outlineShadow	ShadowType	Shadow of the wrapping element ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
rejectedFilesAriaLabel	string	Accessible label for the rejected files list.
rejectedFilesMessage	((files: { name: string; reason: string; }[]) => string)	Message announced when rejected files are detected.
removeFileAriaLabel	((fileName: string, index: number) => string)	Accessible label template for remove buttons.
required	boolean	Whether the file input is required.
selectButtonAriaLabel	string	Accessible label for the upload trigger button.
state	StateType	The state of the file upload ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
successMessage	string	Status message announced when upload succeeds.
theme	ThemeType	Theme for the buttons and progress bar ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').
uploadButtonAriaLabel	string	Accessible label for the submit/upload button.
uploadProgress	number	External upload progress value (overrides internal simulation).