ImageUpload

Square or round image picker that previews the chosen file. Supports a size prop: xs, sm, md (default), lg, xl.

Jump to API reference

Import

Vue
import { UiImageUpload } from '@ziyarago/ui/vue'

Square

Cover image
Vue
<UiImageUpload
  label="Cover image"
  hint="Upload cover"
  :size="200"
  aspect="4/3"
 />

Circle avatar

Avatar
Vue
<UiImageUpload label="Avatar" shape="circle" hint="Photo" :size="140" />

Sizes

Cover
Cover
Cover
Cover
Cover
Vue
<UiImageUpload size="xs" label="Cover" hint="Upload" />

<UiImageUpload size="sm" label="Cover" hint="Upload" />

<UiImageUpload size="md" label="Cover" hint="Upload" />

<UiImageUpload size="lg" label="Cover" hint="Upload" />

<UiImageUpload size="xl" label="Cover" hint="Upload" />

API reference

Image picker with a live preview, square or circular. Use for avatars, covers and logos.

Props

PropType and valuesDefaultDescription
modelValuev-modelstring—Image URL or data URL to show before the user picks a new file.
shapesquarecircle'square'circle gives a round avatar-style crop, otherwise rounded corners.
aspectstring'1/1'CSS aspect-ratio of the box, e.g. "16/9".
hintstring'Upload'Text shown in the empty state.
labelstring—Label shown above the control.
sizexssmmdlgxl'md'Maximum width: 112, 128, 160, 192 or 224 px. A number is used as px directly.

Events

Vue: @name. React: onName.

changeCalled with (dataUrl, file): the picked image as a data URL and the original File.

Notes

  • The preview is kept in internal state, so it updates even without updating modelValue.