FileInput

FileInput is a specialized input providing users a means to select a file or files for upload.

• 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".

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.

FileInputs may be configured for uploading single or multiple files.

To allow multiple files to be uploaded, add the prop multiple.

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.

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.