# `LineaUI.Components.Upload`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/upload.ex#L1)

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.

# `upload`

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`

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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*