PhiaUi.Components.UploadQueue (phia_ui v0.1.17)

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

Summary

Functions

upload_queue(assigns)

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

upload_queue_item(assigns)

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

Functions

upload_queue(assigns)

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(assigns)

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.