Form

Avatar editor

A profile photo the person changes themselves: upload, replace, remove with a confirm, drop a file on it.

Features3

API

Theming

Basic

With a photo the camera button opens "Change photo" and "Remove"; without one it opens the file picker at once. Removing asks first. photoChange gives the file (or null): upload it, keep loading on meanwhile, then set the new image.

JPG or PNG. The photo is shown to your team.

Validation

accept and maxFileSize check the file from the picker and from a drop; a wrong one emits rejected with the reason, here shown in a toast. size sets the photo size in px.

PNG or JPG, up to 200 KB. Drop a file on the photo or use the button.

10 lines

<tx-avatar-editor  name="Marko Petrenko"  accept=".png,.jpg,.jpeg"  hint="PNG or JPG, up to 200 KB. Drop a file on the photo or use the button."  [size]="96"  [maxFileSize]="200 * 1024"  [image]="photo()"  (photoChange)="photo.set($event ? url($event) : null)"  (rejected)="warn($event)"/>

Design tokens

The editor group of the avatar tokens sets the size, the ring and the button.