live_file_input does not support id attribute

[Munksgaard]

Actual behavior

Here is a minimal reproducing example:

Mix.install([
  {:phoenix_playground, "~> 0.1.0"}
])

defmodule DemoLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, allow_upload(socket, :file, accept: :any)}
  end

  def render(assigns) do
    ~H"""
    <div>
    <label for="file_upload">Upload</label>
    <.live_file_input id="file_upload" upload={@uploads.file} />
    </div>
    """
  end

  def handle_event("inc", _params, socket) do
    {:noreply, assign(socket, count: socket.assigns.count + 1)}
  end

  def handle_event("dec", _params, socket) do
    {:noreply, assign(socket, count: socket.assigns.count - 1)}
  end
end

PhoenixPlayground.start(live: DemoLive, port: 4040)

Clicking the label does not trigger the file upload dialog. Nor does the <input> generated by <.live_file_input> contain the correct id attribute. Instead, it contains something like id="phx-F95k0m6WLoF-OQBC"

Expected behavior

The documentation specifies that live_file_input accepts all global attributes, one of which is id. Therefore I would expect that any id that I specify is passed on to the resulting input element.

[mcrumm]

This is expected behavior. The <.live_file_input /> function component uses a specific id for tracking upload entries. There is an example in the docs for using the upload config ref for the label:

Rendering a file input with a label:

<label for={@uploads.file.ref}>File</label>
<.live_file_input upload={@uploads.file} />

The docs can be updated to make this clearer :)

[Munksgaard]

Thank you for the explanation!