Avatar Upload
A profile-photo picker with a local preview. It selects and previews; uploading stays yours.
Profile photo
PNG or JPG, at least 200×200
Preview now, upload later
Picking a file swaps in a local preview immediately, so the UI feels instant — but nothing has been sent anywhere. Do the upload in onFileSelect, and treat the preview as optimistic until it succeeds.
Profile photo
JPG or PNG, max 5MB.
No file chosen yet.
Horizontal
The horizontal layout suits a settings row and adds a Remove button. Note that the local preview clears whether or not you pass onRemove — use the handler for the server-side deletion.
Profile photo
PNG or JPG
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | Current photo URL. Whether the control reads as filled or empty is derived from this. | |
| alt | string | Alt text for that image. | |
| orientation | 'vertical' | 'horizontal' | 'vertical' | Horizontal puts the avatar beside the copy and adds a Remove button. |
| accept | string | Passed to the hidden file input. | |
| title | string | Label above the drop target. | |
| hint | string | Size or format guidance underneath. | |
| onFileSelect | (file: File) => void | Fires with the chosen file. The component never uploads it. | |
| onRemove | () => void | Horizontal Remove handler, for the real deletion. The local preview clears either way. |