- 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 sucessfully uploaded and allow them to remove if necessary.
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.
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.
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.