Avatar uploader

API docs

The avatar uploader allows users to upload a new avatar for their user profiles or projects.

Empty state

The empty state of the uploader offers three ways to upload an image: drag-and-drop, select a local file, or use a webcam to take a photo.

Avatar uploader example
Drop target:
Illustration showing the drop target for dragging over an image.
Alternative input:
Buttons to trigger the file uploader native control and webcam controls.
Actions:
'Save' is disabled at this point, 'Cancel' will close the modal dialog box.
Drag state:
As an image file is dragged over the drop target, the illustration changes to draw attention to it.
Uploading state:
While the image is processing, the illustration changes to a spinner.

Image uploaded

A successfully uploaded avatar can be cropped and repositioned.

Avatar uploader example
Image:
the uploaded image is centred within the masked area. The mask is square if it's a user avatar or round if it's a project avatar. The image always fills the masked area, either by width: 100% or by height: 100%, depending on the orientation.
Zoom controls:
Control the area cropped by the mask.
Actions:
The avatar can be saved at this point.
Resizing:
The image can be cropped using the zoom controls and repositioned using the move cursor.
Error state:
If the upload fails, show an error message and allow another image to be selected.

Webcam image

An new image can also be created using the user's webcam.

Avatar uploader example
Webcam:
After choosing 'Take a photo' from the first screen, the webcam is activated and fills the masked area.
Take photo:
This button will initiate a three-second countdown before taking a photo.
Retake photo:
Discards the captured image and restarts the webcam.