#Overview

Image Upload allows the user to upload images, for example when creating a resale offer.

#When to use

• To allow users to upload images
• Resale (Sell products)
• Wrong delivery
• Help Assistant
• ID upload (in Customer Account)
• Edit avatar (in Customer Account)
• Ratings

#Anatomy

#Normal state

1. Drop Zone: upload photos with drag and drop. The whole area, including the QR code area, is a drop zone for images.
2. Placeholder (optional): these illustrations can help users to pick the best photos.
3. Button: upload photos via the system dialog.
4. QR code: upload photos with your smartphone. The QR code is generated with the help of the front-end. The code needs to have a certain size to be readable by all smartphone cameras. This depends on the complexity of the URL.

#Filled state

Image tiles should always have a 1:1 aspect ratio.

1. Image Tile: a thumbnail of the uploaded photo.
2. Action Icons: each tile offers 2 actions – edit and delete. If an error occurs, the edit icon is replaced by a retry icon.
3. Add Tile: is always the last tile to be displayed once images have already been uploaded.

#Spacing

1. Mobile: Normal state
2. Mobile: Filled state

1. Desktop: Normal state
2. Desktop: Filled state

#Color

1. Galaxus (normal state, filled state)
2. Digitec (normal state, filled state)

#Best practices

#The illustration should be fit for purpose

Do

The initial state’s illustration should represent the photos required for the given task.

Don't

Avoid using an illustration that is not fit for purpose.

#Placement

#Resale (Sell products)

#Wrong delivery

#Help Assistant

The Image Upload is used in the Callback and Contact form within the Help Assistant. The initial state uses a simpler design with an icon and label.

#Edit avatar

The Image Upload in the avatar dialog does not require an illustration.

1. Mobile
2. Desktop

#States

#Mobile

Normal

1. Galaxus
2. Digitec

Filled

1. Galaxus
2. Digitec

Error

1. Galaxus
2. Digitec

#Desktop

Normal

1. Galaxus
2. Digitec

Drag

1. Galaxus
2. Digitec

Drag hover

1. Galaxus
2. Digitec

Filled

1. Galaxus
2. Digitec

Error

1. Galaxus
2. Digitec

#Behavior

#Mobile

The height of the upload form should fit exactly 1 row of images. If the number of images exceeds 1 row, the height of the form will increase accordingly.

#Desktop

For the normal state on desktop, the entire component area is clickable to upload a photo.

The height of the upload form should fit exactly 2 rows of images. If the number of images exceeds 2 rows, the height of the form will increase accordingly.

#Error handling

There are two different types of error messages:

• If we do not recognise a file format, a general error text appears at the bottom.
• If the upload of an image fails, we show an error state directly on the tile with the possibility to repeat the upload. See “Error” in the “States” section above.

#QR code

On desktop, users can upload photos with a smartphone by scanning the QR code. The user is redirected to a temporary upload page where the upload process takes place.

1. Normal
2. Filled
3. Upload in progress
4. Upload success