Media avatar picker
A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.
yarn add @atlaskit/media-avatar-picker26.0.1
Patch Changes
- Updated dependencies
Note: This component is designed for internal Atlassian development.
External contributors will be able to use this component but will not be able to submit issues.
Local Image Upload and Cropping
The AvatarPickerDialog allows the user to upload or drop a local image, then pan and zoom to a desired cropped view.
The default zoom level should fit the image within the crop area. Images smaller than the crop area are scaled up.
The component constrains the panning and scaling of the image to ensure that only valid regions are selectable by the user.
Pre-defined Avatars
The component also allows the user to select from pre-defined avatar images. These can be provided to the component via it's avatars property.
Pre-defined avatars are hidden when an image is chosen by the user.
Error Handling
The component will handle the following errors on the client:
- Bad format - if the user uploads an image with a bad format, or drops an invalid mime type, an error will be shown
- Image size > 10Mib - if the user uploads or drops an image greater than 10Mib in size, an error message will be shown
See the errorMessage property below to set your own custom error message if required.
Note
Client-side only : The component is currently designed to pass back a selected image or avatar. It does not use any specific APIs for storage or upload, that is currently the responsibility of the consumer. In other words you will need a solution to store the selected image or avatar.
Limitations : The component currently only accepts
image/gif,image/jpeg, andimage/pngmime types. SVG is not currently not supported. The component only accepts images up to 10Mib.