Skip to main content
Rivet Design System Indiana University

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 #


Open in new window
Copy link to example 
<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>
Open in new window
Copy link to example 
<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>
Open in new window
Copy link to example 
<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>
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 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