Dropzone
A dropzone is an pattern that makes file upload easy and pleasant to use.
Usage
When to use
Use a drop zone in the following cases:
- To upload files by dragging and dropping.
- To upload one or more files.
- To show the process of uploading.
Types
There are two types of a drop zone:
- Single file upload
- Multi-file upload
Single file upload
- After the upload, the drop zone will be replaced by the uploaded file.
- The file must be deleted in order to upload a new file.
Multi-file upload
- The files will be listed underneath the drop zone.
- Errors should be displayed within the list item.
General construction
Drop zone
By default, the drop zone is configured as small size and simple upload.
1. Label
- Can show that the field is required.
- The label is optional.
2. Drop area
3. Supporting icon
- Supports the drop target visually.
4. Usage hint
5. Browse files link
- Open file browser to pick file(s).
6. Description text
- The description text is optional but recommended.
Options
The following drop zone options are available:
Large drop zone
Label, 2. Drop area, 3. Supporting icon, 4. Usage hint, 5. Browse files button, 6. Description text
- Label
- Can show that the field is required.
- The label is optional.
- Drop area
- Supporting icon
- Supports the drop target visually.
- Usage hint
- Browse files button
- Open file browser to pick file(s).
Description text
- The description text is optional but recommended.
Actions
Single file upload
Multi-file upload
Further actions can be included to the drop zone:
Expand drop target
Behavior
File upload
There are two ways in order to upload files
- Upload by dragging and dropping file(s) into the drop zone.
- Browse your system by clicking the “browse files” link/button.
- Dropping files outside the drop zone has no effect on the interface.
Error messages
Error messages occur when the upload fails. Reasons can be:
- No file has been selected.
- The filetype is wrong or not allowed.
- The file is too big.
- The file is empty.
- There was a problem and the file was not uploaded.
- There is a limit on how many files the user can select.
Upload progress
During file upload the icon is replaced by a busy indicator.
Style
This chapter shows several drop zone styles in the design system.
Overview
Drop zone states
Large drop zone states
Item states
Default
Default with image
Compact
Compact with image
Card
Card with image
List view
General rules of thumbnails
There should be 2-3 elements in one row.
How many elements are in a row depends on:
- Expected file name length.
- Number of expected files.
- Ratio/size of the expected thumbnail.
- Overall width of the drop zone component.
See examples below.