File Upload

The Upload Component is a user interface element that allows users to upload multiple files to a server by dragging and dropping them onto a designated area on the page. The component consists of a drop zone element and a separate element to display the upload progress.

Since drag and drop isn't accessible to screen reader users we also provide a link for users to browse in their file explorer.

Files that fail to upload should move to the top of the upload list so that they are prominent.

Files that are in progress display a progress bar.

Files that are processing are finished uploading and display details of file processing steps with an animated ellipsis.

Files that have been uploaded and processed will appear in a separate file browser component below the file upload module.

File Drag Indication

When a file is dragged over the drop zone, the component provides visual feedback to indicate that the drop zone is a valid target for the file. After the file is dropped, the component will initiate the upload and display the upload progress in real-time.

When a file is dragged over the .file-drag region add the class .drag-over so that the region changes color.

    <div class="file">
      <div class="file-drag drag-over">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
          <path
            class="grey-500"
            d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z">
          </path>
        </svg>
        <p>Drag file here or <a href="#">Browse files</a></p>
      </div>
      ...
    </div>
    

Messaging

<div class="alert alert-warning d-flex">
  <div class="align-self-start"><i class="fa-solid fa-circle-info"></i></div>
  <div class="align-self-center">
    <span>Don't leave the page while upload is in progress</span>
  </div>
</div>

<div class="alert alert-danger d-flex">
  <div class="align-self-start">
    <i class="fa-solid fa-triangle-exclamation"></i>
  </div>
  <div class="align-self-center">
    <p>
      2 files failed to upload. If the error persists, please email
      <a href="#">[email protected]</a> with a screenshot and description
      of the issue.
    </p>
  </div>
</div>

Upload Summary and ARIA: role="region"

File Upload has been designed to provide a streamlined and accessible user experience. Instead of having multiple aria-live attributes on each progress bar, we have a single text container that displays a summary of the current upload progress. This allows screen reader users to get an overview of all the file uploads at once, without being bombarded with a multitude of alert messages.

Aria role="region" is used to define a live region that provides information about the status of a file upload. This role is essential for ensuring that screen reader users receive timely updates about the progress and outcome of the upload.

Usage

1. The role attribute with a value of region on the HTML element represents the status region. This indicates that the element serves as a container for live updates.
2. The aria-live attribute with a value of polite ensures that the updates are announced to the user after the current speech is finished, without interrupting or forcing immediate attention.
3. The aria-atomic attribute set to true indicates that the entire contents of the region should be treated as a single unit and announced together.

Benefits

• Real-time updates: Screen reader users receive immediate feedback on the progress and status of the file upload without requiring manual refreshing or interaction.
• Timely notifications: The live region ensures that updates are announced to the user in a non-intrusive manner, allowing them to stay informed about the upload status while continuing with their current tasks.

<div class="file-summary">
  <span
    class="text-center"
    role="region status"
    aria-live="polite"
    aria-atomic="true"
    ><span class="visually-hidden">File Upload Status:</span>3 files complete, 2
    uploading, 1 processing, 2 failed, 2 in queue
  </span>
</div>

Confirming changes

When a user deletes or cancels a file a modal message should appear for the user to confirm their choice.

Do's

• Do include supported file formats and file size restrictions as form instructions or helper text.
• Do use a specific and descriptive form label that accurately describes what the user is trying to upload.

Dont's

• Don't use file upload oustide of a <fieldset> or <form> element.

References

• Live Regions