Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

# Dropzone

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

## Usage

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

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

Single file upload item

- 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

Multi file upload component

- 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

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

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

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 button
   - Open file browser to pick file(s).

6. Description text

   - The description text is optional but recommended.

#### Actions

##### Single file upload

Trigger upload with a button

Cancel uploading file

Replace uploaded file by another

##### Multi file upload

Further actions can be included to the dropzone:

1. Trigger upload with a button

1. Cancel uploading file, 2. Cancel all uploads button.

##### Expand drop target

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

### Behavior

#### File upload

Upload by dragging

Upload by clicking

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.

Upload drag and drop

#### Error messages

Dropzone error message

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

Visually support file upload process

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

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

#### Large dropzone states

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

#### Item states

##### Default

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

##### Default with image

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

##### Compact

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

##### Compact with image

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

##### Card

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

##### Card with image

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

#### List view

Default list

Default list with image

Compact list

Compact list with image

Card/thumbnails

Card/thumbnails with image

#### Options

##### Replace option

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

Standalone example

Example with form context

#### Large dropzone with list - multi file upload

Standalone example

Example with dialog context

#### Large dropzone - single file upload

Standalone example - dropzone disappears and file item is displayed

Example with form context - Uploading

#### Large dropzone with cards/thumbnails

Standalone example

Example with form context

## Dropzone

Drop items here or Browse files

Drop items here or Browse files

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

Drop items here or Browse files

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.

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