PtahUi.Components.ImageUploader (PtahUI v0.1.0)

Drag-and-drop file uploader built on Phoenix LiveView's upload primitives.

Requires allow_upload/3 in the parent LiveView or LiveComponent.

Example

# In mount/3:
allow_upload(socket, :avatar, accept: ~w(.jpg .jpeg .png), max_entries: 1)

# In template:
<.image_uploader upload={@uploads.avatar} />

upload (:any) (required) - The @uploads.field_name struct.
class (:string) - Extra classes for the drop zone. Defaults to "".
image_class (:string) - Extra classes for the preview image. Defaults to "".
image (:string) - Current image URL (shown when no entry is staged). Defaults to nil.
icon (:string) - Icon shown in the default placeholder. Defaults to "hero-cloud-arrow-up".
label (:string) - Primary placeholder label. Defaults to "Clica ou arrasta para fazer upload".
sublabel (:string) - Secondary placeholder hint. Defaults to "PNG, JPG, WEBP".
preview_disabled (:boolean) - Hides the staged-file preview. Defaults to false.
rounded (:boolean) - Clips the drop zone as a circle. Defaults to false.
capture (:string) - Defaults to nil.
accept (:string) - Defaults to nil.
border_class (:string) - Border colour classes for the drop zone. Defaults to "border-gray-300 hover:border-indigo-400".
bg_class (:string) - Background colour classes for the drop zone on hover. Defaults to "hover:bg-indigo-50/40".
placeholder_text_class (:string) - Colour of the default placeholder icon and text. Defaults to "text-gray-400".