The avatar uploader allows users to upload a new avatar for their user profiles or projects.
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.
- 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.
- '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.
A successfully uploaded avatar can be cropped and repositioned.
- 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.
- The avatar can be saved at this point.
- 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.
An new image can also be created using the user's 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.