Best practices
Always include a relevant label and use help text to communicate the types of files that are allowed, or if there’s a size limit to consider. The dropzone contains both a label and button so it’s important they convey a meaningful message and call to action.
|
✅ Do |
🛑 Don’t |
|---|---|
|
Use useful and relevant labels and help text that relate to the expected actions or restrictions. |
Use generic labels or exclude helpful information about restrictions so users can avoid mistakes. |
When to use
- To enable users to upload files and photos
- When users need to be able to remove individual files that they’ve added
- When users will benefit from seeing thumbnails of the added photos
When not to use
- If the same information can be inputted in a simpler or more efficient way without requiring file uploads. For example, using text inputs, dropdowns, or date pickers might be more appropriate.
- Consider using the File input component for inline forms.
Anatomi
- Form label
- Dropzone
- Dropzone label
- File browser
- Helper text
- Error text
- Filename
- Icon/thumbnail (optional)
- Remove file action
- Error alert message
Behaviour
When files are being dragged, the dropzone changes state to acknowledge the interaction and indicate where the files should be dropped. This dragging state starts when the pointer (holding files) hovers over the entire page.
Responsive behaviour
On phones and smaller size devices, touch makes drag and drop behaviour less intuitive. In these cases, the drop area changes to a simpler tap action that triggers the file browser.
Validation and error handling
When files are required, the error text will be displayed to let users know they need to a add file(s) before they can proceed.
Files are always added, never replaced, which means files can end up having the same name in the list. As users won’t be able to add file types that aren’t accepted, the errors with files will be limited to size and number restrictions. Those files won’t be added but instead, an alert error message will be displayed to let users know their action didn’t do what they hoped it would.
Content guidelines
Form label
Always include a label with the File uploader. Labels should clearly describe the file(s) being requested. They should be concise and descriptive, not instructional.
Dropzone label
This label should help highlight the ability to drag and drop so it’s clear to users that this option is available.
Help text
File limitations should be communicated to the user up front to help avoid errors, like uploading an incompatible file type or one that’s too large. Use positive framing to clearly communicate limitations to the user:
- Number of files – You can upload up to [max numb.] files.
- File type – You can upload [x], [y] and [z] file formats.
- File size – Files can be up to [size limit].
File types
- Lists have three display options, simple, with icon, or thumbnail, and they are mutually exclusive.
- Use simple or with icon if there’s a chance different file types can be uploaded, e.g images and documents.
- Use thumbnails only when images are uploaded as a way to help users identify uploads with similar file names, i.e IMG_1023.png, IMG_1024.png, IMG_1203.png, etc.
- Long file names are truncated in the beginning to allow the file type to be visible.
|
✅ Do |
🛑 Don’t |
|---|---|
|
Stick to one list style, be it plain, icons, or thumbnails. |
Mix between icons, thumbnails, and plain labels in the same list. |
Articles
Drag–and–Drop: How to Design for Ease of Use – NNg
A List of 16 Best Practices for Designing File Upload Functionality on a Mobile App – SoulFx
The complete guide to implementing file uploading – Uploadcare
10 File Upload UX Best Practices – CLIMB