HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
Usage
Accessibility
Variants
FileInput with multiple files
FileInput validation
FileInput with file removal confirmation
FileInput within a form
Components

FileInput

An input field where a user can select and upload one or more files.

Drag and drop

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.

Drag and drop

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.

file-size-too-large.zip
2 items
file-size-okay.csv
file-size-too-large.zip

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.

Drag and drop

FileInput within a form

HPE Design System FileInput Form Example
See FileInput Preview

Related

Related content you may find useful when using FileInput.

HPE Forms Preview

Forms

Common form use cases from application configuration to payment acceptance.

Select

Select is a flexible input field that allows users to choose from a list of options.

TextInput

TextInput is a field used in forms to capture short entries.

MaskedInput

MaskedInput allows you to specify formatted text within a form field.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page