PhiaUi.Components.ImageGalleryUpload (phia_ui v0.1.17)

Multi-image upload with a grid thumbnail gallery.

Provides image_gallery_upload/1 — a max_entries-aware upload zone that renders selected images as live thumbnails in a responsive grid. Each thumbnail shows a remove button. An "Add more" cell is rendered while the entry limit has not been reached.

Requirements

The parent LiveView must configure the upload with allow_upload/3:

def mount(_params, _session, socket) do
  {:ok,
   socket
   |> allow_upload(:gallery,
     accept: ~w(.jpg .jpeg .png .webp),
     max_entries: 6,
     max_file_size: 10_000_000
   )}
end

Basic usage

<.image_gallery_upload
  upload={@uploads.gallery}
  label="Product images"
  on_cancel="cancel_upload"
/>

Handling cancel

def handle_event("cancel_upload", %{"ref" => ref}, socket) do
  {:noreply, cancel_upload(socket, :gallery, ref)}
end

Summary

Functions

image_gallery_upload(assigns)

Renders a grid of image thumbnails with an "Add more" cell.

Functions

image_gallery_upload(assigns)

Renders a grid of image thumbnails with an "Add more" cell.

Examples

<.image_gallery_upload upload={@uploads.gallery} label="Photos" />

<.image_gallery_upload upload={@uploads.photos} cols={3} aspect="video" />

Attributes

upload (:any) (required) - A Phoenix.LiveView.UploadConfig struct from @uploads.field_name.
label (:string) - Label rendered above the gallery grid. Defaults to nil.
description (:string) - Helper text shown below the label. Defaults to nil.
cols (:integer) - Number of grid columns (3, 4, or 5). Defaults to 4.
aspect (:string) - Thumbnail aspect ratio — square (1:1), video (16:9), portrait (3:4). Defaults to "square". Must be one of "square", "video", or "portrait".
on_cancel (:string) - LiveView event name fired when the × remove button is clicked. Defaults to "cancel_upload".
class (:string) - Additional CSS classes applied to the outer wrapper. Defaults to nil.