File Upload

Allows users to upload files of various sizes and formats

Example

Default

  • Screenshot 2022-04-11 at 5.56.25 PM.png
  • Screenshot 2022-04-29 at 2.53.40 PM.png
  • Screenshot 2022-04-29 at 5.12.56 PM.png

 
<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

File Upload Anatomy
  1. Icon (situational): Serves to give a visual queue to the upload button.
  2. Button: Button component is used.
  3. Uploaded content: Displayed 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 necessary.

Spacing

File Upload 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:

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

File upload should not be used:

  1. Documents are optional.
  2. 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 necessaryso users know what exactly they have to upload.

Home


Previous version 2.0.0