LiveView uploads wrapper that shares Corex.FileUpload layout tokens (data-scope / data-part) and styling.

Use after allow_upload/3. Pass upload={@uploads.name} and field matching the atom given to allow_upload. Renders live_file_input and phx-drop-target; no Zag FileUpload hook. Do not combine this component with <.file_upload> on the same file control.

Forms must bind phx-change (and typically phx-submit) as in the uploads guide. For shared form patterns, see the Forms guide.

Anatomy

Minimal

<form phx-change="validate">
  <.file_upload_live upload={@uploads.document} field={:document} class="file-upload">
    <:close>
      <.heroicon name="hero-x-mark" />
    </:close>
  </.file_upload_live>
</form>

With label

<form phx-change="validate">
  <.file_upload_live upload={@uploads.document} field={:document} class="file-upload">
    <:label>Files</:label>
    <:close>
      <.heroicon name="hero-x-mark" />
    </:close>
  </.file_upload_live>
</form>

Custom slots

<form phx-change="validate">
  <.file_upload_live upload={@uploads.document} field={:document} class="file-upload">
    <:dropzone>
      <span>Custom dropzone</span>
    </:dropzone>
    <:open>
      <span>Custom trigger</span>
    </:open>
    <:close>
      <.heroicon name="hero-x-mark" />
    </:close>
  </.file_upload_live>
</form>

Form with submit

<form phx-change="validate" phx-submit="save">
  <.file_upload_live upload={@uploads.attachment} field={:attachment} class="file-upload">
    <:label>Attachment</:label>
    <:close>
      <.heroicon name="hero-x-mark" />
    </:close>
  </.file_upload_live>
  <.action type="submit" class="button button--accent">Submit</.action>
</form>

def mount(_params, _session, socket) do
  {:ok,
   allow_upload(socket, :attachment,
     accept: ~W(.jpg .jpeg .png .pdf .txt),
     max_entries: 3,
     max_file_size: 8_000_000
   )}
end

def handle_event("validate", _params, socket), do: {:noreply, socket}

def handle_event("save", _params, socket) do
  _results =
    consume_uploaded_entries(socket, :attachment, fn %{path: path}, entry ->
      File.rm!(path)
      {:ok, entry.client_name}
    end)

  {:noreply, socket}
end

def handle_event("file_upload_live_cancel", params, socket) do
  %{"ref" => ref, "upload_field" => field} = params
  {:noreply, cancel_upload(socket, String.to_existing_atom(field), ref)}
end

LiveView setup

def mount(_params, _session, socket) do
  {:ok,
   allow_upload(socket, :document,
     accept: ~w(.jpg .jpeg .png .pdf),
     max_entries: 3,
     max_file_size: 8_000_000
   )}
end

def handle_event("file_upload_live_cancel", %{"ref" => ref, "upload_field" => field}, socket) do
  {:noreply, cancel_upload(socket, String.to_existing_atom(field), ref)}
end

The field atom must match the name passed to allow_upload/3. Implement file_upload_live_cancel so remove-entry works; optional cancel_event on the component overrides the event name.