Dropzone

A dropzone is an pattern that makes file upload easy and pleasant to use.

Usage

Upload process — Behavior of an upload process

When to use

Use a dropzone 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 dropzone:

Single file upload
Multi file upload

Single file upload

After the upload, the dropzone will be replaced by the uploaded file.
The file must be deleted in order to upload a new file.

Multi file upload

The dropzone can be used anytime.
The files will be listed underneath the dropzone.
Errors should be displayed within the list item.

General construction

Dropzone

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 dropzone 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 dropzone options are available:

Large dropzone

Dropzone - large variant — 1. 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

Upload button — Trigger upload with a button

Multi file upload

Further actions can be included to the dropzone:

Batch upload — 1. Trigger upload with a button

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

There are two ways in order to upload files

Upload by dragging and dropping file(s) into the dropzone.
Browse your system by clicking the “browse files” link/button.
Dropping files outside the dropzone has no effect on the interface.

Error messages

Error on dropzone component — Dropzone 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

During file upload the icon is replaced by a busy indicator.

Style

This chapter shows several dropzone styles in the User Experience Toolkit.

Overview

Dropzone states

Large dropzone states

Item states

Default

Default with image

Compact

Compact with image

Card

Card with image

List view

Options

Replace option

File item with replace button — List, compact list and card file item with replace button

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

See examples below.

Examples

Drop zone with compact list - multi file upload

Large dropzone with list - multi file upload

Large dropzone - single file upload

Large dropzone with cards/thumbnails

Dropzone

Drop items here or Browse files

<div class="dropzone__container dragAndDrop__area">
	<span aria-hidden='true' class='iconUxt upload'></span>
	<span class="dropzone__title">Drop items here</span>
	<span class="dropzone__description">or</span>
	<label class="button button--secondary" for="dropzone__file1">Browse files</label>
	<input type="file" id="dropzone__file1" name="dropzone__file" multiple />
</div>

<p></p>

<div class="dropzone__container dragAndDrop__area has-error">
	<span aria-hidden='true' class='iconUxt upload'></span>
	<span class="dropzone__title">Drop items here</span>
	<span class="dropzone__description">or</span>
	<label class="button button--secondary" for="dropzone__file2">Browse files</label>
	<input type="file" id="dropzone__file2" name="dropzone__file" multiple />
</div>

<p></p>

<div class="dropzone__container dragAndDrop__area is-disabled">
	<span aria-hidden='true' class='iconUxt upload'></span>
	<span class="dropzone__title">Drop items here</span>
	<span class="dropzone__description">or</span>
	<label class="button button--secondary" for="dropzone__file3">Browse files</label>
	<input type="file" id="dropzone__file3" name="dropzone__file" multiple disabled />
</div>

Compact dropzone

Drop items here or Browse files

<div class="dropzone__container dragAndDrop__area dragAndDrop__area--compact">
	<span aria-hidden='true' class='iconUxt upload'></span>
	<span class="dropzone__title">Drop items here or</span>
	<label class="button button--secondaryContentAction" for="dropzone__file4">Browse files</label>
    <input type="file" id="dropzone__file4" name="dropzone__file" multiple />
</div>

<p></p>

<div class="dropzone__container dragAndDrop__area dragAndDrop__area--compact has-error">
	<span aria-hidden='true' class='iconUxt upload'></span>
	<span class="dropzone__title">Drop items here or</span>
	<label class="button button--secondaryContentAction" for="dropzone__file5">Browse files</label>
    <input type="file" id="dropzone__file5" name="dropzone__file" multiple />
</div>

<p></p>

<div class="dropzone__container dragAndDrop__area dragAndDrop__area--compact is-disabled">
	<span aria-hidden='true' class='iconUxt upload'></span>
	<span class="dropzone__title">Drop items here or</span>
	<label class="button button--secondaryContentAction" for="dropzone__file6">Browse files</label>
    <input type="file" id="dropzone__file6" name="dropzone__file" multiple disabled />
</div>

Item states

Itemname.suffix
57 MB
Itemname.suffix
57 MB
Itemname.suffix
57 MB

<div class="list dropzone__itemState">
	<ul class="list__list">
		<li class="list__item">
			<div class="item__icon">
				<span class="iconUxt filetypeDefault" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--small"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
		<li class="list__item itemState--upload">
			<div class="item__icon">
				<span class="iconUxt filetypeDefault" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--small"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
		<li class="list__item itemState--error">
			<div class="item__icon">
				<span class="iconUxt filetypeDefault" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--small"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>		
	</ul>
</div>

Item states image

Itemname.suffix
57 MB
Itemname.suffix
57 MB
Itemname.suffix
57 MB

<div class="list dropzone__itemState">
	<ul class="list__list">
		<li class="list__item">
			<div class="item__image">
				<img src="assets/images/image.png" alt="image placeholder" />
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--small"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>		
		<li class="list__item itemState--upload">
			<div class="item__icon">
				<span class="iconUxt filetypeDefault" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--small"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>		
		<li class="list__item itemState--error">
			<div class="item__icon">
				<span class="iconUxt image" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--small"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
	</ul>
</div>

Item states compact

Itemname.suffix
57 MB
Itemname.suffix
57 MB
Itemname.suffix
57 MB
Itemname.suffix
File is too large Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. (max. 3 MB)
Itemname.suffix
File is too large (max. 3 MB)

<div class="list dropzone__itemState dropzone__itemState--compact">
	<ul class="list__list">
		<li class="list__item">
			<div class="item__icon">
				<span class="iconUxt filetypeDefault" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--xsmall"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
		<li class="list__item itemState--upload">
			<div class="item__icon">
				<span class="iconUxt filetypeDefault" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--xsmall"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
		<li class="list__item">
			<div class="item__image">
				<img src="assets/images/image.png" alt="image placeholder" />
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--xsmall"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						57 MB
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
		<li class="list__item itemState--error">
			<div class="item__icon">
				<span class="iconUxt filetypeDefault" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--xsmall"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						File is too large Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. (max. 3 MB)
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
		<li class="list__item itemState--error">
			<div class="item__icon">
				<span class="iconUxt image" aria-hidden="true"></span>
				<div class="busyIndicator">
					<div class="busyIndicator__ring busyIndicator__ring--xsmall"></div>
				</div>
			</div>
			<div class="item__content">
				<div class="content__column content__column--primary">
					<h4 class="item__title">
						Itemname.suffix
					</h4>
					<div class="item__description">
						File is too large (max. 3 MB)
					</div>
				</div>
				<div class="content__column has-alignment-right">
					<button class="button button--ghost has-icon-only"></button>
				</div>
			</div>
		</li>
	</ul>
</div>

Usage

Element	Class	Description
`.dropzone__container .dragAndDrop__area`	`.dragAndDrop__area--compact`	Enables the compact variant.
`.dropzone__container .dragAndDrop__area`	`.has-error`	Error state for drop zone.
`.list dropzone__itemState`	`.dropzone__itemState--compact`	Enables the compact variant.
`.list__item`	`.itemState--upload` `.itemState--error`	Upload and error state for drop zone list items.
`.item__image`	`.item__image--portrait`	this class is required to display portrait format graphics correctly.