LineaUI.Components.Upload (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's file uploads, built on LiveView uploads: the drop panel of its FilePond demos (bordered, filled, in a grid, or a round avatar drop) with each file's progress, errors and cancel button, and the styled "Choose File" buttons of its Input File demo.

# mount
socket |> allow_upload(:photos, accept: ~w(.jpg .png), max_entries: 4)

<.form for={@form} phx-change="validate" phx-submit="save">
  <.upload upload={@uploads.photos} on_cancel="cancel-upload" bordered columns={2} />
</.form>

def handle_event("cancel-upload", %{"ref" => ref}, socket),
  do: {:noreply, cancel_upload(socket, :photos, ref)}

The component renders live_file_input itself, so it must be inside the form that has the phx-change LiveView uploads need.

Summary

Functions

upload(assigns)

Renders the drop panel and the list of chosen files.

upload_button(assigns)

A button that opens the file chooser: LineOne's Input File, a <label class="btn"> holding an invisible file input.

Functions

upload(assigns)

Renders the drop panel and the list of chosen files.

<.upload upload={@uploads.avatar} layout="circle" bordered class="w-28" on_cancel="cancel">
  <:label><svg>…</svg></:label>
</.upload>

Events: the remove button of a file pushes on_cancel with %{"ref" => entry_ref} (to target when given); answer with cancel_upload/3.

Attributes

  • upload (Phoenix.LiveView.UploadConfig) (required) - @uploads.name.
  • id (:string) - Defaults to <upload ref>-pond. Defaults to nil.
  • bordered (:boolean) - A dashed border (LineOne's fp-bordered). Defaults to false.
  • filled (:boolean) - A filled panel (LineOne's fp-bg-filled). Defaults to false.
  • columns (:integer) - Files side by side, as LineOne's Two/Three/Four Grid. Defaults to 1. Must be one of 1, 2, 3, or 4.
  • layout (:string) - circle is the round single-file drop of LineOne's Circle Filepond; size it with class. Defaults to "panel". Must be one of "panel", or "circle".
  • on_cancel (:any) - Event (or %JS{}) of the remove button. Defaults to nil.
  • target (:any) - Defaults to nil.
  • previews (:boolean) - A thumbnail for image files. Defaults to true.
  • error_texts (:map) - The text of each upload error atom. Defaults to %{too_large: "File is too large", not_accepted: "File of invalid type", too_many_files: "Too many files", external_client_failure: "Upload failed"}.
  • browse_label (:string) - Defaults to "Browse".
  • drop_label (:string) - Defaults to "Drag & Drop your files or".
  • remove_label (:string) - Defaults to "Remove".
  • uploading_label (:string) - Defaults to "Uploading".
  • complete_label (:string) - Defaults to "Upload complete".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • label - Replaces the text of the drop panel (the circle layout shows an icon).

upload_button(assigns)

A button that opens the file chooser: LineOne's Input File, a <label class="btn"> holding an invisible file input.

<.upload_button upload={@uploads.avatar}>Choose File</.upload_button>
<.upload_button name="doc" color="info" variant="glow" icon shape="pill" aria-label="Upload">
  <svg>…</svg>
</.upload_button>

With upload it renders live_file_input; otherwise a plain <input type="file" name>.

Attributes

  • upload (Phoenix.LiveView.UploadConfig) - Defaults to nil.
  • name (:string) - Name of the plain file input, without upload. Defaults to nil.
  • multiple (:boolean) - Plain input only. Defaults to false.
  • accept (:string) - Plain input only. Defaults to nil.
  • color (:string) - Defaults to "neutral". Must be one of "neutral", "primary", or "info".
  • variant (:string) - Defaults to "solid". Must be one of "solid", "outline", or "glow".
  • shape (:string) - Defaults to "rounded". Must be one of "rounded", or "pill".
  • icon (:boolean) - A square button that holds only an icon. Defaults to false.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)