Components Avatar pickers

Avatar pickers

Avatar + upload + remove. Used on user, partner, and organisation profile pages. The avatar itself comes from the per-entity avatar tag helper; the upload and remove form pair sits beside it.

<koala-avatar-picker>

Canonical

<koala-avatar-picker user-id="@Model.User.Id"
                     first-name="@Model.User.FirstName"
                     last-name="@Model.User.LastName"
                     email="@Model.User.Email"
                     avatar-version="@Model.User.AvatarVersion" />

Avatar fills its 20×20 slot. Upload submits a multipart form; Remove fires a POST handler and removes the blob. Both forms target the picker so the avatar re-renders without a full page nav.

Variants

3 variants

User avatar

<koala-avatar>

Partner avatar — no image yet

<koala-partner-avatar>

Organisation avatar

<koala-organisation-avatar>

States

3 states

Idle

Uploading

Image must be less than 10MB

Validation error

Props

2 inputs

The picker is a partial (_AvatarPicker, _PartnerAvatarPicker, _OrganisationAvatarPicker) rendered with the relevant model + an optional ReturnUrl via ViewData.

Input	Type	Notes
model	UserEntity / PartnerEntity / OrganisationEntity	The entity owning the avatar. Drives the avatar slot, initials, and "has image" branch.
ViewData["ReturnUrl"]	string?	Optional. Forwarded as a hidden input on the upload/remove forms.

Do & don't

Do Avatar on the left, actions on the right. Remove is destructive — render it Danger-outlined and only when there's an image to remove.

Click to upload

Don't Don't make the avatar itself the upload target. The intent is unclear — users can't tell whether clicking opens the file picker or zooms in.