Anatomy
- Label - describes the upload section
- Help text - describes file requirements
- Upload button - the action to select a file to upload
- File card - represents the uploaded file
- Dismiss button - enables the user to remove the file
- Heading - describes the upload section
- Help text - describes file requirements
- Drop zone - the user can drag and drop files here
- Drop zone label - describes the drop zone
- Upload button - the action to select a file to upload
- File card - represents the uploaded file
- Dismiss button - enables the user to remove the file
Best Practices
Include instructions
Include well-formatted and concise instructions about file acceptance criteria or other upload-related information. This is crucial to prevent errors and helps easing the overall flow.
Include clear instructions and requirements that mandate file upload to prevent errors
Avoid hiding the help text or adding long, complicated or unformatted instructions.
Button label and drop zone label
The labels of the button and the drop zone are crucial for an effortless file upload experience. These labels should be concise and explain what will happen after clicking or dropping files.
Use the default text or come up with another one that indicates well what the user can expect after certain actions.
Avoid giving a general label to the button and/or the drop zone.
Drag and drop goes hand in hand with the button
When using the File Upload Drag and Drop component, it is important to keep the button available in the drop zone for accessibility reasons.
Keep both the button and the drop zone label so that the interface meets accessibility standards.
Avoid hiding the button from the drop zone.
Error handling
In order to help the user resolve errors as quick and easy as possible, error messages should be concise and descriptive. It is not a must, but recommended to keep the error helper to provide more instructions to resolve the error.
State the reason for the error in the error message and give further instructions on how to resolve it with the error helper.
Avoid showing an error message that does not state what caused the error. Also try to avoid not giving instructions on how to resolve it.
CTA Hierarchy
Consider the overall layout and action hierarchy when designing with the File Upload component. In case a layout already has a primary button, use the tertiary variant in the File Upload component instead.
Forms including simple and drag and drop file upload controls. In these example the file upload components are added to fieldsets.
Special Cases
Some flows permit only one file to be uploaded. In these cases, we recommend changing the label of the button, so that it is clear for the user that the new upload will overwrite the previous file.
Responsive Guidelines
It is possible that the file cards need to fit to smaller spaces resulting in the truncation of the file name. To provide an option for users to see the filename in these cases as well, the hover interaction triggers a tooltip.
Related Components & Patterns