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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M10.41,1H3.5A1.3,1.3,0,0,0,2.2,2.3V13.7A1.3,1.3,0,0,0,3.5,15h9a1.3,1.3,0,0,0,1.3-1.3V4.39ZM11.8,5.21V6H9.25V3h.34ZM4.2,13V3h3V6.75A1.25,1.25,0,0,0,8.5,8h3.3v5Z" />
</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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M10.41,1H3.5A1.3,1.3,0,0,0,2.2,2.3V13.7A1.3,1.3,0,0,0,3.5,15h9a1.3,1.3,0,0,0,1.3-1.3V4.39ZM11.8,5.21V6H9.25V3h.34ZM4.2,13V3h3V6.75A1.25,1.25,0,0,0,8.5,8h3.3v5Z" />
</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 aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path fill="currentColor" d="M10.41,1H3.5A1.3,1.3,0,0,0,2.2,2.3V13.7A1.3,1.3,0,0,0,3.5,15h9a1.3,1.3,0,0,0,1.3-1.3V4.39ZM11.8,5.21V6H9.25V3h.34ZM4.2,13V3h3V6.75A1.25,1.25,0,0,0,8.5,8h3.3v5Z" />
</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 Details object properties
rvt:fileAttached 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