File Upload
File Upload component is a form element that allows users to select a file
Playground
Experiment with all the properties of the FileUpload component in real time.
Properties
label
Sets the component label.
helperText
Displays additional helper text.
errorMessage
Message shown when the field is invalid.
accept
Allowed file types (e.g., .png, .jpg).
maxSize
Maximum allowed file size in bytes.
type
Switches between dropzone and button behavior.
size
Sets the component’s overall size.
displayMode
Chooses between list or thumbnail view.
multiple
Allows selecting more than one file.
viewFileSize
Shows the size of each uploaded file.
required
Marks the field as required.
invalid
Marks the field as invalid.
disabled
Disables all interactions.
Drop files here or click to upload
Controlled ComponentonChange
Control the selected files using value and onChange.
Drop files here or click to upload
API Reference
Props
Prop | Default | Type |
|---|---|---|
type | "dropzone" | "dropzone" | "button" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
disabled | false | boolean |
invalid | false | boolean |
multiple | false | boolean |
accept | undefined | string |
required | false | boolean |
label | undefined | string |
errorMessage | "" | string |
helperText | "" | string |
maxSize | undefined | number |
onChange | undefined | (event: React.ChangeEvent<HTMLInputElement>) => void |
onDragOver | undefined | (event: React.DragEvent<HTMLElement>) => void |
onDragLeave | undefined | (event: React.DragEvent<HTMLElement>) => void |
onDrop | undefined | (event: React.DragEvent<HTMLElement>) => void |
name | undefined | string |
onFilesRejected | undefined | (files: File[]) => void |
viewFileSize | false | boolean |
displayMode | "list" | "list" | "thumbnail" |