File Upload

Allows users to upload files of various sizes and formats.

General

Example

Default

      
    
         
<form class="">
  <button type="button" class="btn btn-primary cgds">
    <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 cgds">
    <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

Icon (situational): Serves to give a visual queue to the upload button.
Button: Button component is used.
Uploaded content: Displayed to show users what has been uploaded.
Validation and remove: Serves to inform users if a file has been successfully uploaded and allow them to remove if necessary.

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

File upload should be used:

When you require users to upload mandatory documents. E.g., proof of signature.

File upload should not be used:

Documents are optional.
When you require users to upload large files.

Usability guidelines

State the format of the file(s)
This will prevent users from uploading invalid formats and encountering errors.

State the maximum file size
This is to prevent users from uploading files sizes that are too large 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.