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.

Examples

Minimal

<form phx-change="validate">
  <.file_upload_live upload={@uploads.anatomy_minimal} field={:anatomy_minimal} id="file-upload-live-anatomy-minimal">
    <:close>
      <.heroicon name="hero-x-mark" />
    </:close>
  </.file_upload_live>
</form>

With label

<form phx-change="validate">
  <.file_upload_live upload={@uploads.anatomy_label} field={:anatomy_label} id="file-upload-live-anatomy-label">
    <: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.anatomy_custom} field={:anatomy_custom} id="file-upload-live-anatomy-custom">
    <: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" id="file-upload-live-form">
  <.file_upload_live upload={@uploads.attachment} field={:attachment} id="file-upload-live-field">
    <:label>Attachment</:label>
    <:close>
      <.heroicon name="hero-x-mark" />
    </:close>
  </.file_upload_live>
  <.action type="submit" class="button button--accent w-full">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

The Minimal / With label / Custom slots HEEx matches the e2e anatomy page; each expects allow_upload for :anatomy_minimal, :anatomy_label, or :anatomy_custom respectively (same names as field).

Implement file_upload_live_cancel so remove-entry works; optional cancel_event on the component overrides the event name.