# `PhiaUi.Components.ImageGalleryUpload`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/inputs/image_gallery_upload.ex#L1)

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

# `image_gallery_upload`

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`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*