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

Ordered upload queue showing per-file progress for multiple entries.

Provides `upload_queue/1` — a list component that renders every entry in a
Phoenix LiveView `UploadConfig` as a progress row. Each row shows a file-type
icon, filename, progress bar, percentage, individual error messages, and a
cancel button. Upload-level errors are shown at the top.

## When to use

Use `upload_queue/1` when you need to upload multiple files simultaneously
and want to show per-file progress for each — document managers, batch import
tools, media libraries, or any interface where users upload several files at
once and need visibility into each one.

Compare with `file_upload/1` (drop zone + custom entry slot) — `upload_queue/1`
renders the full queue itself with no drop zone.

## Requirements

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

    def mount(_params, _session, socket) do
      {:ok,
       socket
       |> allow_upload(:files,
         accept: :any,
         max_entries: 10,
         max_file_size: 50_000_000
       )}
    end

## Basic usage

    <%!-- Drop zone elsewhere; queue shows progress --%>
    <.upload_queue
      upload={@uploads.files}
      on_cancel="cancel_upload"
    />

## Combined with a trigger button

    <.upload_button upload={@uploads.files} label="Add files" />
    <.upload_queue upload={@uploads.files} on_cancel="cancel_upload" />

## Handling cancel

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

# `upload_queue`

Renders a multi-entry upload queue with per-file progress rows.

## Examples

    <.upload_queue upload={@uploads.imports} on_cancel="cancel_import" />

    <.upload_queue upload={@uploads.photos} show_empty={true} empty_label="Add photos above" />

## Attributes

* `upload` (`:any`) (required) - A `Phoenix.LiveView.UploadConfig` struct from `@uploads.field_name`.
* `on_cancel` (`:string`) - LiveView event name fired when the × cancel button is clicked. Defaults to `"cancel_upload"`.
* `show_empty` (`:boolean`) - When true, renders an empty state message when there are no entries. Defaults to `false`.
* `empty_label` (`:string`) - Text shown in the empty state when `show_empty` is true. Defaults to `"No files selected"`.
* `class` (`:string`) - Additional CSS classes applied to the outer wrapper. Defaults to `nil`.

# `upload_queue_item`

Renders a single upload queue row with icon, filename, progress bar, and cancel.

## Example

    <.upload_queue_item entry={entry} on_cancel="cancel_upload" />

## Attributes

* `entry` (`:any`) (required) - A `Phoenix.LiveView.UploadEntry` struct or compatible map.
* `on_cancel` (`:string`) - LiveView event name for the cancel button. Defaults to `"cancel_upload"`.
* `class` (`:string`) - Additional CSS classes applied to the row. Defaults to `nil`.

---

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