FileUploader
Overview
FileUploader
allows users to upload content of their own to the system. A file uploader is commonly found in forms, but can also live as a standalone element.
When to use:
- Uploading one or multiple documents or images.
- Drag and drop one or multiple documents or images.
Implementation
Edit the code below to see your changes live!
function Example() { const [files, setFiles] = useState<File[]>([]); const validateFileSize = (file: File) => { const MB = 1024 * 1024; return file.size <= MB; }; return ( <Form> <FormGroup> <FileUploader dropzoneConfig={{ label: 'Drag and drop image here', }} files={files} label="Upload files" multiple onFilesChange={setFiles} required validators={[ { validator: validateFileSize, type: 'file-size', }, ]} /> </FormGroup> </Form> ); }
Props
Supports most native <input />
element attributes.
Prop name | Type | Default | Description |
---|---|---|---|
accept | string |
| Takes as its value a comma-separated list of one or more file types or unique file type specifiers, such as |
description | string | FormControlDescription |
| Adds a description to the |
disabled | boolean |
| Disables the |
dropzoneConfig | { label?: string; description?: string; icon?: ReactNode } |
| Adds a label and a description to the drop-zone box. |
error | string | string[] | FormControlError | FormControlError[] |
| Displays an error message for the field. Error message will be passed to the |
files * | File[] |
| Value for the |
previewHidden | boolean |
| Value for the |
label | string | FormControlLabel |
| Label element for |
labelId | string |
| Adds an |
localization | { upload: string; optional: string } |
| Overrides labels with localized text. |
multiple | boolean |
| Allows to upload multiple files. |
validators | ValidatorConfig[] |
| Allows to define custom validators for files. |
onFilesChange * | (files: File[]): void |
| Function called to change files value. Receives new files from the component. |
onFilesError | (errors: FileValidationError[]): void; |
| Function called when one of the validators fails. Receives an array of errors. |
Props ending with * are required
Do's and Don'ts
Do |
---|
Specify allowed file types and maximum size. |