The File Uploader is a form component that lets users upload their own content.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Field label |
Mandatory textual label for FileUpload used to describe the form component to guide users in filling it. |
No |
|
2. Required or optional marker |
Textual label for FileUpload used to denote if a field is required or optional. Marker’s copy is not changeable. |
Yes |
|
3. Popover trigger |
Used to display a Popover next to with more content explaining the context of a field. Used when helper text is not sufficient. |
Yes |
|
4. Helper text |
Additional FileUpload description helping users provide the right input, if the field label is insufficient. |
Yes |
|
5. Dropzone |
Area that allows users to upload a file or multiple files by clicking anywhere in the Dropzone area, or to drag and drop a file or multiple files. |
No |
|
6. Browse link |
Link that opens the user’s native file picker so that they can select a file or multiple files for upload. Copy is not configurable. |
No |
|
7. Drag and drop instruction |
Instruction to indicate that files can be manually dragged and dropped into the Dropzone. Copy is not configurable. |
No |
|
8. File name |
Name of the file chosen to be uploaded. |
No |
|
9. Delete button |
Permanently removes a file. |
No |
|
10. Form validation |
Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | hover | focus | rest |
| hasFiles Variant | false | true | false |
| validation Variant | neutral | error | neutral |
Behavior
File selection and upload
Files can be dragged into the Dropzone area (see Anatomy) from the user’s file manager. The entire area is interactive, so users can also click anywhere in the Dropzone to open a native file browser dialog.
Selected files display under the Dropzone. Files will start uploading once the user submits the form containing the File Upload.
Maximum allowed number of files
If files are being dragged into the Dropzone and they exceed the maximum allowed number of files, the component’s focus border will change to an error state with an error message displayed.
Component dependencies
This component is internally dependent on the following form sub-components:
|
Figma |
Code |
|---|---|
|
formElement.labelGroup |
Legend |
|
formElement.validation |
InputError |
|
formelement.fileUpload.file |
File |
Figma sub-components
It’s also dependent on:
Help and support