Dropzone

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

1. Label, 2. Drop area, 3. Supporting icon, 4. Usage hint, 5. Browse files button, 6. Description text

2. Label
   • Can show that the field is required.
   • The label is optional.
3. Drop area
4. Supporting icon
   • Supports the drop target visually.
5. Usage hint
6. Browse files button
   • Open file browser to pick file(s).

7. 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.