FileInput

Usage

Example

Principles

• A label should always be provided with a FileInput. It should clearly describe what the user is expected to select.
• The helper text below the FileInput describes the file requirements to the user. It lists accepted file formats as well as the maximum size of a single file.
  • Note that the helper text is generated automatically from the accept and maxSize properties.
• The FileInput does not automatically upload files to any server. The user is required to submit the form before the actual upload happens.
• One FileInput can be configured to accept one or multiple files.
  • Make sure labels of the input indicate the number of expected files to the user.
  • A FileInput allowing multiple files fits well for situations where all the files are related to each other (e.g. multiple photos from the same event).
  • If the user has to upload multiple files that are not related to each other, prefer using multiple file uploads - one for each file.
• Dragging and dropping files can be allowed by using the dragAndDrop property.
• The FileInput uses an info text element to inform the user about the status of the component. You can read more about the usage of the info text element in the HDS Form validation pattern documentation page.
• The FileInput component resolves human-readable file size abbreviations based on a binary system. The file size texts are shown after the selected file name and in maxSize messages if maxSize validation is used.
• The accept parameter only checks and allows correct file types according to the file extension(s) or file types, instead of doing any in-depth analysis.

Variations

Default

In its default form, the HDS FileInput offers a button-like element that opens a file browser native to the user's current device. Selected files are presented in a list below the input and files can be removed from the listing separately.

With drag and drop

If in some cases having the ability to drag and drop files onto the page could help the user, this can be enabled with the dragAndDrop property. Note that the traditional file input is still included below the drag and drop area. Therefore this property does not weaken the accessibility of the component.

With default value

If needed, the file input can be prefilled with pre-existing file(s). Useful, for example, if adding files in a multi-page form and coming back to the file-adding step again.