Live view file input key not in map


I’m experimenting with live view file input and I have problem when I create it in live compoent, I get error

key "phx-FlqDBelz62hhtB9I" not found in: %{"phx-FlqDBcpW_-BhtHal" => :thumbnail, "phx-FlqDBcpWtahhtHaF" => :background}

This error appears when I select file for upload.

My mount function on component

@impl true
def mount(socket) do
  |> allow_upload(:picture, accept: ~w(.png), max_file_size: 10_000_000)
  |> assign(:changeset,
  |> (& {:ok, &1}).()

Render function

@impl true
  def render(assigns) do
      <%= f = form_for @changeset,
        id: "#{@myself}-form",
        phx_taget: @myself,
        phx_change: "validate",
        phx_submit: "save" %>

        <div class="mt-3">
          <%= label f, gettext("Name"), class: "form-label" %>
          <%= text_input f, :name, class: "form-control", required: true, maxlength: 200 %>
          <%= error_tag f, :name %>

        <%= for entry <- @uploads.picture.entries do %>
            <progress max="100" value="<%= entry.progress %>" />
        <% end %>

        <div class="mt-3">
          <%= label f, gettext("Pic"), class: "form-label" %>
          <%= live_file_input @uploads.picture %>

        <%= submit "Save", class: "btn btn-success" %>

Validate function

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

I don’t know if it have any influence, but parrent live view also contains live_file_input

Does any body experienced something similar? How did you solve it?
I will be gratefull for any help.

I would not use @myself to build the id… just a plain id.

Also, there is a typo, phx_taget instead of phx_target.

1 Like

Thank you, but error persists :slightly_frowning_face:

Do live uploads already work with components?
They didn’t work yet in the first release.

I followed this tutorial, so I suppose so…, but I think problem is actualy nested form and somehow it triggering validate/submit of parent form