PineUiPhoenix.Extras.FileUpload (Pine UI v0.2.0)

Copy Markdown View Source

A drag-and-drop file upload area.

Not a Pines element — Pines has no uploader. This exists because v0.1.x exported file_uploader/1, image_uploader/1 and multi_file_uploader/1, and deleting a documented API is worse than porting it.

Two modes

Pass a LiveView upload config and it wires itself up to Phoenix.LiveView.allow_upload/3:

<.file_upload upload={@uploads.avatar} label="Avatar" />

That gives you real progress, per-entry validation errors, cancellation and image previews, all from LiveView. This is the mode to use.

Without one, it renders a plain <input type="file"> with the same drop zone, for ordinary form posts and non-LiveView pages:

<.file_upload name="document" accept=".pdf" label="Document" />

The v0.1.x version reimplemented progress and previews in Alpine with FileReader, duplicating what LiveView already does — and without the server ever knowing about the upload. Delegating to allow_upload/3 is both less code and the only version that actually uploads anything.

Summary

Forms

file_upload(assigns)

Renders a file upload area.

Forms

file_upload(assigns)

Renders a file upload area.

With LiveView

def mount(_, _, socket) do
  {:ok, allow_upload(socket, :avatar, accept: ~w(.jpg .png), max_entries: 1)}
end

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

<.file_upload upload={@uploads.avatar} variant="image" on_cancel="cancel" />

Accessibility

The drop zone is a <label> wrapping the file input, so clicking anywhere in it opens the picker and the input stays keyboard-reachable and screen-reader-labelled. Drag-and-drop is an enhancement on top, never the only route.

Attributes

  • id (:string) - Defaults to nil.
  • upload (:any) - A Phoenix.LiveView.UploadConfig, i.e. @uploads.avatar. Enables the LiveView mode. Defaults to nil.
  • name (:string) - Field name for the plain-input fallback. Defaults to nil.
  • label (:string) - Defaults to nil.
  • hint (:string) - Defaults to nil.
  • error (:string) - Defaults to nil.
  • accept (:string) - An accept list, e.g. "image/*" or ".pdf,.docx". Defaults to nil.
  • multiple (:boolean) - Defaults to false.
  • disabled (:boolean) - Defaults to false.
  • variant (:string) - image shows thumbnail previews of accepted entries. Defaults to "default". Must be one of "default", or "image".
  • preview_height (:string) - Defaults to "h-32".
  • on_cancel (:string) - Event pushed with a ref value when an entry's cancel button is clicked. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block - Replaces the drop zone's default prompt.