PhiaUi.Components.UploadButton (phia_ui v0.1.17)

Copy Markdown View Source

Button-style file picker — triggers the file dialog without a drop zone.

Provides upload_button/1 — a compact alternative to the full file_upload/1 drop-zone when you just need a button to open the file picker. The selected file(s) appear in an optional compact list below the button.

Useful for:

  • Attaching files in a messaging interface
  • Importing a CSV or JSON config file
  • Adding a single document to a form without the visual overhead of a dropzone

Requirements

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

def mount(_params, _session, socket) do
  {:ok, allow_upload(socket, :csv, accept: ~w(.csv), max_entries: 1)}
end

Basic usage

<%!-- Simple upload trigger --%>
<.upload_button upload={@uploads.csv} label="Import CSV" />

<%!-- With icon and custom variant --%>
<.upload_button
  upload={@uploads.documents}
  label="Attach files"
  variant="outline"
  on_cancel="cancel_upload"
/>

Handling cancel

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

Summary

Functions

upload_button(assigns)

Renders a button that opens the system file picker when clicked.

Functions

upload_button(assigns)

Renders a button that opens the system file picker when clicked.

No drop zone is shown — only the button and an optional compact list of selected entries. Use file_upload/1 when a visual drop zone is needed.

Examples

<.upload_button upload={@uploads.import} label="Import CSV" />

<.upload_button upload={@uploads.docs} label="Attach" variant="outline" size="sm" />

Attributes

  • upload (:any) (required) - A Phoenix.LiveView.UploadConfig struct from @uploads.field_name.
  • label (:string) - Button label text. Defaults to "Upload file".
  • variant (:string) - Button visual style. Defaults to "default". Must be one of "default", "outline", "ghost", or "secondary".
  • size (:string) - Button size. Defaults to "default". Must be one of "sm", "default", or "lg".
  • show_list (:boolean) - When true, renders selected entries in a compact list below the button. Defaults to true.
  • on_cancel (:string) - LiveView event name fired when the × remove button is clicked on an entry. Defaults to "cancel_upload".
  • class (:string) - Additional CSS classes applied to the outer wrapper. Defaults to nil.