PhiaUi.Components.DocumentUpload (phia_ui v0.1.17)

Copy Markdown View Source

Document-specific upload dropzone with file-type icons.

Provides document_upload/1 — a drag-and-drop zone tailored for non-image documents (PDF, DOCX, XLSX, CSV, ZIP, etc.). Each accepted entry is rendered via document_upload_entry/1, which displays the file type icon, name, size hint, a progress bar, and a remove button.

Requirements

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

def mount(_params, _session, socket) do
  {:ok,
   socket
   |> allow_upload(:docs,
     accept: ~w(.pdf .docx .xlsx .csv .zip .txt),
     max_entries: 5,
     max_file_size: 20_971_520  # 20 MB
   )}
end

Basic usage

<.document_upload
  upload={@uploads.docs}
  label="Upload documents"
  accepted_types=".pdf, .docx, .xlsx"
  on_cancel="cancel_upload"
/>

<%!-- Customised entry slot --%>
<.document_upload upload={@uploads.docs} label="Attach files">
  <:entry :let={entry}>
    <.document_upload_entry entry={entry} on_cancel="cancel_upload" />
  </:entry>
</.document_upload>

Handling cancel

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

Summary

Functions

document_upload(assigns)

Renders a document upload dropzone with file-type icons.

document_upload_entry(assigns)

Renders a single document entry row with file-type icon, name, progress, and remove button.

Functions

document_upload(assigns)

Renders a document upload dropzone with file-type icons.

Examples

<.document_upload upload={@uploads.docs} accepted_types=".pdf, .docx" max_size_label="20 MB" />

Attributes

  • upload (:any) (required) - A Phoenix.LiveView.UploadConfig struct from @uploads.field_name.
  • label (:string) - Heading displayed inside the drop zone. Defaults to "Upload documents".
  • description (:string) - Helper text rendered above the drop zone. Defaults to nil.
  • accepted_types (:string) - Human-readable accepted formats hint, e.g. ".pdf, .docx, .xlsx". Defaults to nil.
  • max_size_label (:string) - Human-readable max file size hint, e.g. "20 MB". Defaults to nil.
  • 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.

Slots

  • entry - Custom slot for rendering each entry. Receives the entry via :let. Defaults to <.document_upload_entry> when not provided.

document_upload_entry(assigns)

Renders a single document entry row with file-type icon, name, progress, and remove button.

Example

<.document_upload_entry 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 × remove button. Defaults to "cancel_upload".
  • class (:string) - Additional CSS classes applied to the entry row. Defaults to nil.