File Upload

Example

<form class="">
  <button type="button" class="btn btn-primary sgds">
    <label for="fileupload1">
      <i class="bi bi-upload me-2"></i>
      Choose a file
    </label>
    <input multiple type="file" id="fileupload1" class="d-none form-control" />
  </button>
  <ul class="fileupload-list sgds">
    <li class="fileupload-list-item">
      <i class="bi bi-check-lg me-2 check-icon"></i
      ><span class="filename">Screenshot 2022-04-11 at 5.56.25 PM.png</span
      ><i class="bi bi-x-circle ms-2 x-circle-icon"></i>
    </li>
    <li class="fileupload-list-item">
      <i class="bi bi-check-lg me-2 check-icon"></i
      ><span class="filename">Screenshot 2022-04-29 at 2.53.40 PM.png</span
      ><i class="bi bi-x-circle ms-2 x-circle-icon"></i>
    </li>
    <li class="fileupload-list-item">
      <i class="bi bi-check-lg me-2 check-icon"></i
      ><span class="filename">Screenshot 2022-04-29 at 5.12.56 PM.png</span
      ><i class="bi bi-x-circle ms-2 x-circle-icon"></i>
    </li>
  </ul>
</form>

Anatomy

1. Icon (situational): Serves to give a visual cue to the upload button.
2. Button: Button component is used.
3. Uploaded content: To show users what has been uploaded.
4. Validation and remove: Serves to inform users if a file has been sucessfully uploaded and allow them to remove if needed.

Spacing

Within the file upload
Ensure that there is a min of 16px vertical spacing between the button, hint text and uploaded items and a min of 8px between uploaded items.

Usage guidelines

Best practices:

1. Show the progress of uploading.
2. Error messages about file uploads must be exposed to assistive technology.
3. The delete button needs to have the uploaded file name associated with it programmatically, so the user understands which file will be removed.

File upload should be used when:

1. You require users to upload mandatory documents. E.g proof of signature.

File upload should not be used when:

1. Documents are optional and a text input field or text area may be more suitable.
2. When you require users to upload large files.

Usability guidelines

State the file specifications clearly
Stating the file specifications clearly will prevent users from uploading invalid formats, exceeding file size and encountering errors.

Have clear labelling and use hint text
Ensure you label the file upload clearly as well as hint text when necessary so users know what exactly they have to upload.

Behaviour
A file that is being uploaded should have three distinct states—loading, success, and uploaded.

Accessibility guidelines

Keyboard accessibility

1. Tab or Shift-Tab to navigate between file upload button and the remove file button of the uploaded file.
2. Enter or Space on the upload button to open file upload dialog.
3. Enter or Space on the remove file button to remove the file.

Focus indicator

1. Use a clear and distinct focus indicator to help users identify when the file upload input is focused.
2. Ensure the focus indicator is highly visible against different backgrounds and contrasts well with the surrounding elements.
3. Offer visual and auditory feedback when the file is successfully uploaded or when there is an error.