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 #

Choose an example

<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>

Open in new window Copy link to example

<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>

Open in new window Copy link to example

<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	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