Avatar Upload with a Crop Step

ProNew

Choose a photo, a dialog opens with a round crop tool (zoom, move, rotate, keyboard controls), applying it shows the cropped avatar with Replace and Remove. Use this when profile pictures must be square and centred on the face.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

size512

Guide and examples

When to use it

Users upload profile pictures that you display in a circle or square.

Do not use it when: If any aspect ratio is fine, skip cropping and let ImageUpload take the file as it is.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`onChange`	`(file: File \| null) => void`	-	The cropped PNG, or `null` after Remove.
`size`	`number`	`512`	Edge of the saved square in pixels.

Accessibility

Choosing a file never silently becomes the avatar: it opens a titled dialog first, with focus management from the Dialog and the keyboard and button controls of Image Cropper (arrow keys move the crop box; every pointer action has a button).
Cancel leaves the previous avatar untouched. The final control is named "Use this photo".
Image Upload still provides the labelled picker, validation messages, Replace and Remove outside the dialog.

Testing

The pattern ships with a Testing Library test (avatar-upload-with-crop.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.