Guidance
FileInput is a specialized input providing users a means to select a file or files for upload.
Usage
- User must be able to upload a file by clicking the "Select file" button, dragging and dropping a file over the drop region, or tabbing to the FileInput and pressing the Spacebar or Enter key.
- When FileInput is in a Form, the file should not be uploaded/saved to a server until the user has submitted the form.
- Once a file has been added to the input, a button featuring a Trash icon will appear next to the file name allowing removal of that file.
- The "Select file" button should always be visible, allowing the user to add more files/replace a file after they have already selected one.
For additional configurations, such as defining accepted file type, all instrinsic HTML properties are supported. For a comprehensive list of these options, you can read more about HTML input type="file".
Accessibility
When using FileInput within a Form, the FormField wrapping the FileInput should have htmlFor
and name
properties that match the id
and name
properties placed onto the FileInput. Reference the FileInput within a Form example to see how to implement.
Variants
FileInputs may be configured for uploading single or multiple files.
FileInput with multiple files
To allow multiple files to be uploaded, add the prop multiple
.
FileInput validation
When a file provided to FileInput does not meet its validation criteria, such as file size or type, ensure the user has means to remove the file from the input.
FileInput with file removal confirmation
In some cases, it may be appropriate to display a confirmation modal when a user attempts to remove a file. For example, if any time consuming file scanning processes have occurred, a confirmation modal should be used to avoid accidental file removal which results in the user needing to go through the file scanning processes again.
To see this behavior, add a file then click the "Trash" button to see the confirmation.
FileInput within a form
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.