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="singleFileInput">
<input type="file" data-rvt-file-input-button="singleFileInput" id="singleFileInput" aria-describedby="file-description">
<label for="singleFileInput" class="rvt-button">
<span>Upload a file</span>
<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"></path></svg>
</label>
<div class="rvt-file__preview" data-rvt-file-input-preview="singleFileInput" id="file-description">
No file selected
</div>
</div>
<div class="rvt-file" data-rvt-file-input="singleFileInput">
<input type="file" data-rvt-file-input-button="singleFileInput" id="singleFileInput" aria-describedby="file-description">
<label for="singleFileInput" class="rvt-button rvt-button--secondary">
<span>Upload a file</span>
<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"></path></svg>
</label>
<div class="rvt-file__preview" data-rvt-file-input-preview="singleFileInput" 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 fill="currentColor" width="16" height="16" viewBox="0 0 16 16"><path d="M2 1h8.414L14 4.586V15H2V1Zm2 2v10h8V7.5H7.5V3H4Zm5.5 0v2.5H12v-.086L9.586 3H9.5Z"></path></svg>
</label>
<div class="rvt-file__preview" data-rvt-file-input-preview="multipleFilesInput" id="file-description-two">
No files selected
</div>
</div>

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

  • Replace the file icon with another icon
  • 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

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