File input
Allow a user to select a file to be uploaded as part of a form submission
Overview #
Use the file input component to allow the user to select a file to be uploaded as part of a form submission.
Examples #
<div class="rvt-file" data-rvt-file-input="example-file-input">
<input type="file" data-rvt-file-input-button="example-file-input" id="example-file-input" aria-describedby="file-description">
<label for="example-file-input" class="rvt-button">
<span>Upload a file</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"/></svg>
</label>
<div class="rvt-file__preview" data-rvt-file-input-preview="example-file-input" id="file-description">
No file selected
</div>
</div>
<fieldset class="rvt-fieldset">
<legend class="rvt-m-bottom-sm">Letter of Recommendation <span class="rvt-color-orange-500 rvt-text-bold">*</span></legend>
<div class="rvt-file" data-rvt-file-input="example-file-input">
<input type="file" data-rvt-file-input-button="example-file-input" id="example-file-input" aria-describedby="file-description" required>
<label for="example-file-input" class="rvt-button">
<span>Upload letter</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"/></svg>
</label>
<div class="rvt-file__preview" data-rvt-file-input-preview="example-file-input" id="file-description">
No file selected
</div>
</div>
</fieldset>
<div class="rvt-file" data-rvt-file-input="example-file-input">
<input type="file" data-rvt-file-input-button="example-file-input" id="example-file-input" aria-describedby="file-description">
<label for="example-file-input" class="rvt-button rvt-button--secondary">
<span>Upload a file</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"/></svg>
</label>
<div class="rvt-file__preview" data-rvt-file-input-preview="example-file-input" id="file-description">
No file selected
</div>
</div>
<div class="rvt-file" data-rvt-file-input="multipleFilesInput">
<input type="file" data-rvt-file-input-button="multipleFilesInput" id="multipleFilesInput" aria-describedby="file-description-two" multiple>
<label for="multipleFilesInput" class="rvt-button">
<span>Upload multiple files</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"/></svg>
</label>
<div class="rvt-file__preview" data-rvt-file-input-preview="multipleFilesInput" id="file-description-two">
No files selected
</div>
</div>
Elements #
Element | Description | Usage | Required | Multiple |
---|---|---|---|---|
Button label | Label that appears inside the file upload button | Limit to a few words. Describe the kind of file being uploaded, such as Upload recommendation letter . |
Button label is required |
Component may contain only one Button label |
Usage #
Do
- Use to allow a user to upload one or more files as part of a form submission
- Use an explicit allow list to specify which file types can be uploaded
- Use both client- and server-side code to check that uploaded files match the size and format you expect
Don't
- Allow users to upload files of unlimited size
- Ask or allow users to upload executable files such as
.exe
,.bin
, or.app
- Rely on a block list to cover every possible malicious file type—use an explicit allow list instead
Accessibility #
- Wrap required file inputs in a fieldset. Wrap individual required file inputs in a
fieldset
element. Use thelegend
element to describe the type of file the user should upload and add an asterisk (*) to indicate that the file is required. The required file input shows an example of this markup. - Include a note about required fields. If you use required file inputs in a form, add a note to the start of the form or field set explaining that required fields are marked with an asterisk (*). The create or edit resource page layout includes an example of this note.
JavaScript #
Event | Description | Detail object properties |
---|---|---|
rvtFileAttached |
Emitted when one or more files is selected for upload |
files : An array containing the name of each attached file |