FileUpload
The FileUpload component allows users to upload files with validation options such as size, type, and progress feedback.
Usage
Default
<FileUpload label="Upload your document" onSubmit={...}/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Upload File" | Label for the file upload input. |
| description | string | - | Short helper text or instructions below the label. |
| error | string | - | Error message displayed below the input. |
| required | boolean | false | Marks the field as required. |
| disabled | boolean | false | Disables the file input. |
| multiple | boolean | false | Allow multiple files to be selected. |
| allowedFileTypes | Array<string> | - | List of allowed file MIME types (e.g. ['image/png', 'application/pdf']). |
| maxFileSizeBytes | number | infinity | Maximum allowed file size in bytes. Default: Infinity. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Theme color for the input. |
| state | "" | "success" | "error" | "warning" | - | State variant for status feedback. |
| outline | boolean | false | Display the control in outlined style. |
| outlineRounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for the outlined box. |
| outlineShadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Box shadow for the outlined box. |
| controlRounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for the upload button. |
| controlShadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Box shadow for the upload button. |
| uploadProgress | number | - | Current upload progress percentage (0–100) if externally controlled. |
| onSubmit | (files: FileList) => void | - | Callback fired when the user confirms file upload. |
| data-testid | string | "file-upload" | Test ID for query selectors in testing. |