Live view file input key not in map

Hello,

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
  socket
  |> allow_upload(:picture, accept: ~w(.png), max_file_size: 10_000_000)
  |> assign(:changeset, Test.new())
  |> (& {:ok, &1}).()
end

Render function

@impl true
  def render(assigns) do
    ~L"""
    <div>
      <%= 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 %>
        </div>

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

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

        <%= submit "Save", class: "btn btn-success" %>
      </form>
    </div>
    """
  end

Validate function

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

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.

1 Like

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

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

2 Likes

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

@tino415 did you actually get a fix for this

I did not get it resolved, I stopped using nested forms

Nested forms are not allowed in HTML