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.
Canonical
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 variantsSA
User avatar
<koala-avatar>
AL
Partner avatar — no image yet
<koala-partner-avatar>
KT
Organisation avatar
<koala-organisation-avatar>
States
3 statesSA
Idle
SA
Uploading
SA
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
SA
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.
SA
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.