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

Single file upload component

The single file upload only allows one file to be uploaded.

Single file upload - file item

Single file upload item
  • 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

Multi file upload component

Multi file upload component

Drop Zone

- The drop zone can be used anytime.
  • The files will be listed underneath the drop zone.
  • Errors should be displayed within the list item.

General construction

Drop zone

Single file upload - construction

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

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

  • 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

Drop zone - large variant

  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

Upload button

Trigger upload with a button

Cancel

Cancel uploading file
Multi-file upload

Further actions can be included to the drop zone:

Batch upload

Drop Zone

1. Trigger upload with a button

Cancel upload

Drop Zone

1. Cancel uploading file, 2. Cancel all uploads button.
Expand drop target

Expanded drop target

The drop target may cover a whole dialog or even the complete UI to be droppable.

Behavior

File upload

Drag'n'drop

Upload by dragging

Mouse down

Upload by clicking

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 on drop zone component

Drop zone error message

Error on file

Error message within an upload item

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

Upload progress

Visually support file upload process

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

Drop Zone

1. Default, 2. Hover or dragging within interactive area, 3. Active (Pressed or dragging over area), 4. Disabled, 5. Error

Large drop zone states

Drop Zone

1. Default, 2. Hover or dragging within interactive area, 3. Active (Pressed or dragging over area), 4. Disabled, 5. Error

Item states

Default

Drop Zone

1. Uploading, 2. Uploading with progress indicator, 3. Upload successful, 4. Error
Default with image

Drop Zone

1. Uploading, 2. Uploading with progress indicator, 3. Upload successful, 4. Error
Compact

Drop Zone

1. Uploading, 2. Uploading with progress indicator, 3. Upload successful, 4. Error
Compact with image

Drop Zone

1. Uploading, 2. Uploading with progress indicator, 3. Upload successful, 4. Error
Card

Drop Zone

1. Uploading, 2. Uploading with progress indicator, 3. Upload successful, 4. Error
Card with image

Drop Zone

1. Uploading, 2. Uploading with progress indicator, 3. Upload successful, 4. Error

List view

Drop Zone

Default list

Drop Zone

Default list with image

Drop Zone

Compact list

Drop Zone

Compact list with image

Drop Zone

Card/thumbnails

Drop Zone

Card/thumbnails with image
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.

Examples

Drop zone with compact list - multi-file upload

Drop Zone

Standalone example

Drop Zone

Example with form context

Large drop zone with list - multi-file upload

Drop Zone

Standalone example

Drop Zone

Example with dialog context

Large drop zone - single file upload

Drop Zone

Standalone example - drop zone disappears and file item is displayed

Drop Zone

Example with form context - Uploading

Large drop zone with cards/thumbnails

Drop Zone

Standalone example

Drop Zone

Example with form context
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top