Skip to main content

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 the legend 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
  • Learn more about using Rivet JavaScript