Catalog Uploads

<.image>

ConnieUI.Uploads

HEEx 
<div class="flex h-56 w-md">
  <.live_component
    module={ConnieUI.Playground.Catalog.Uploads.Uploader}
    id="catalog-upload-image"
    kind={:image}
    controls=img_class="max-h-40 rounded-lg" recommended_size="1000x1200px"
  />
</div>

Controls

:string

URL of the current image

:string

Classes for the image/preview element

:string

Recommended dimensions (e.g., "1000x1200px")

Set by the example

upload target

Docs

Image upload component with preview. Shows a box with the current/selected image centered. Upload button in top-right becomes cancel button when a file is selected. The whole box is clickable and supports drag-and-drop. Pass `target={@myself}` when used inside a LiveComponent. ## Examples <ConnieUI.Uploads.image upload={@uploads.avatar} current={@avatar_url} img_class="size-10 rounded-full object-cover" target={@myself} />
Attribute Type Default Description
upload * {:struct, Phoenix.LiveView.UploadConfig}
current :string nil
URL of the current image
img_class :string nil
Classes for the image/preview element
recommended_size :string nil
Recommended dimensions (e.g., "1000x1200px")
target :any nil
Target for cancel event (e.g., @myself in LiveComponents)