File Uploads

File upload invites the user to select a file on their computer and upload it to the server. The component includes controls and status indicators.

Overview

To guide the user through the upload process, use multiple parts:

  • File Input to select a file to upload.
  • File Upload to indicate status during and after the upload process.

View the File Upload sample page to see the parts integrated, with code documented on Sample Pages.

Design and Layout

When using the HTML version of the component, the aria-value-now="50" attribute on the .indi-form__percentage-indicator element and the style="width:50%;" attribute on the .indi-form__percentage-indicator-bar element need to be updated as the file uploads.

Accessibility

When using the HTML version:

  • Add role=”progressbar”, aria-value-now=”0”, aria-valuemin=”0” and aria-valuemax=”100” attributes to the .indi-form__percentage-indicator element.
  • The aria-valuenow value should be udpated as the file transfer processes.

Installation

Props

Events