An issue with uploading file using LiveView

When uploading a file using live_view form the following error is thrown

[error] GenServer #PID<0.832.0> terminating
** (KeyError) key "phx-Fseb32TVk9l_8wKC" not found in: %{"phx-Fseb4rMTYjuATwHG" => :visitors_file}
    :erlang.map_get("phx-Fseb32TVk9l_8wKC", %{"phx-Fseb4rMTYjuATwHG" => :visitors_file})
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/upload.ex:186: Phoenix.LiveView.Upload.get_upload_by_ref!/2
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/channel.ex:1056: anonymous fn/3 in Phoenix.LiveView.Channel.maybe_update_uploads/2
    (stdlib 3.17) maps.erl:410: :maps.fold_1/3
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/channel.ex:490: anonymous fn/5 in Phoenix.LiveView.Channel.component_handle_event/6
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/diff.ex:206: Phoenix.LiveView.Diff.write_component/4
    (phoenix_live_view 0.17.5) lib/phoenix_live_view/channel.ex:488: Phoenix.LiveView.Channel.component_handle_event/6
    (stdlib 3.17) gen_server.erl:695: :gen_server.try_dispatch/4
    (stdlib 3.17) gen_server.erl:771: :gen_server.handle_msg/6
    (stdlib 3.17) proc_lib.erl:226: :proc_lib.init_p_do_apply/3
Last message: %Phoenix.Socket.Message{event: "event", join_ref: "15", payload: %{"cid" => 2, "event" => "validate-upload", "type" => "form", "uploads" => %{"phx-Fseb32TVk9l_8wKC" => [%{"name" => "Copie de liste_dossiers_inscriptions_.xls", "path" => "visitors_file", "ref" => "0", "size" => 72192, "type" => "application/vnd.ms-excel"}]}, "value" => "_target=visitors_file"}, ref: "16", topic: "lv:phx-Fseb3w10i5qTzgFG"}
State: %{components: {%{1 => {UtmaktabaWeb.ModalComponent, :modal, %{__changed__: %{}, component: UtmaktabaWeb.VisitorLive.FormComponent, flash: %{}, id: :modal, myself: %Phoenix.LiveComponent.CID{cid: 1}, opts: [id: :upload, title: "Import Visitors", action: :upload, uploads: %{__phoenix_refs_to_names__: %{"phx-Fseb4rMTYjuATwHG" => :visitors_file}, visitors_file: #Phoenix.LiveView.UploadConfig<accept: ".xls,.xlsx", auto_upload?: false, entries: [], errors: [], max_entries: 1, max_file_size: 8000000, name: :visitors_file, progress_event: nil, ref: "phx-Fseb4rMTYjuATwHG", ...>}, return_to: "/admin/visitors"], return_to: "/admin/visitors"}, %{__changed__: %{}, root_view: UtmaktabaWeb.VisitorLive.Index}, {32418010583157767378746343849255060140, %{}}}, 2 => {UtmaktabaWeb.VisitorLive.FormComponent, :upload, %{__changed__: %{}, action: :upload, flash: %{}, id: :upload, myself: %Phoenix.LiveComponent.CID{cid: 2}, return_to: "/admin/visitors", title: "Import Visitors", uploads: %{__phoenix_refs_to_names__: %{"phx-Fseb4rMTYjuATwHG" => :visitors_file}, visitors_file: #Phoenix.LiveView.UploadConfig<accept: ".xls,.xlsx", auto_upload?: false, entries: [], errors: [], max_entries: 1, max_file_size: 8000000, name: :visitors_file, progress_event: nil, ref: "phx-Fseb4rMTYjuATwHG", ...>}}, %{__changed__: %{}, root_view: UtmaktabaWeb.VisitorLive.Index}, {107684438911017609171355754527962087739, %{2 => {222003774085469888410314492609622821962, %{}}}}}}, %{UtmaktabaWeb.ModalComponent => %{modal: 1}, UtmaktabaWeb.VisitorLive.FormComponent => %{upload: 2}}, 3}, join_ref: "15", serializer: Phoenix.Socket.V2.JSONSerializer, socket: #Phoenix.LiveView.Socket<assigns: %{__changed__: %{}, current_user: #Utmaktaba.Accounts.User<__meta__: #Ecto.Schema.Metadata<:loaded, "users">, confirmed_at: ~N[2022-01-06 06:51:31], confirmed_at_v: false, email: "admin@example.com", hashed_password: "$argon2id$v=19$m=131072,t=8,p=4$lj1qrlgvKhnl5SU7BmFCaA$+g0qkpYj4FsZsHbkY97NYkHG47NB8ZlbO+GTY67smEQ", id: 1, inserted_at: ~N[2022-01-06 06:51:31], role: "admin", updated_at: ~N[2022-01-06 06:51:31], ...>, flash: %{}, live_action: :upload, locale: "ar", page_title: "Import Visitors", search_changeset: #Ecto.Changeset<action: nil, changes: %{}, errors: [], data: %{}, valid?: true>, uploaded_files: [], uploads: %{__phoenix_refs_to_names__: %{"phx-Fseb4rMTYjuATwHG" => :visitors_file}, visitors_file: #Phoenix.LiveView.UploadConfig<accept: ".xls,.xlsx", auto_upload?: false, entries: [], errors: [], max_entries: 1, max_file_size: 8000000, name: :visitors_file, progress_event: nil, ref: "phx-Fseb4rMTYjuATwHG", ...>}, visitors: [%Utmaktaba.VisitTracking.Visitor{__meta__: #Ecto.Schema.Metadata<:loaded, "visitors">, birthd

The code is as follow

#live/visitor_live/index.ex

def mount(_params, _session, socket) do

    {:ok,
      socket
      # |> assign(....)
      |> assign(:uploaded_files, [])
      |> allow_upload(:visitors_file, accept: ~w(.xls .xlsx), max_entries: 1)
    }
  end

# live/visitor_live/index.html.ex

# some code ...
<%= if @live_action in [:new, :edit] do %>
  <%= live_modal @socket, UtmaktabaWeb.VisitorLive.FormComponent,
    id: @visitor.id || :new,
    title: @page_title,
    action: @live_action,
    visitor: @visitor,
    return_to: Routes.visitor_index_path(@socket, :index) %>
<% end %>

<%= if @live_action in [:upload] do %>
  <%= live_modal @socket, UtmaktabaWeb.VisitorLive.FormComponent,
    id: :upload,
    title: @page_title,
    action: @live_action,
    uploads: @uploads,
    return_to: Routes.visitor_index_path(@socket, :index) %>
<% end %>
# some code ...

#live/visitor_live/form_component.ex

# some code ..
def update(%{action: :upload} = assigns, socket) do
    {:ok,
      socket
      |> assign(assigns)
    }
  end
# some .....


#live/visitor_live/form_comoponent.html.ex
<%=if @action in [:upload] do %>
<div id="visitor-upload-form-wrapper" class="uploads my-20 p-5 bg-gray-200">
  <h3><%= dgettext("headers", "Upload visitors") %></h3>
  <form id="upload-form" class="mt-10" phx-submit="upload-visitors-file" phx-change="validate-upload" phx-target={@myself}>
    <%= live_file_input @uploads.visitors_file %>
  <button type="submit" class="btn btn-indigo"><%= dgettext("links", "Upload") %></button>
</form>
</div>
<% end %>
2 Likes

You seem to be declaring the upload (allow_upload) in the LiveView, but actually use it in the form_component.html.ex. Move the allow_upload in the form_component as well.

1 Like

@sfusato
The issue is resolved thanks to @chrismccord.
The crash of the upload handler is the cause of this issue.
Thank you every for the help.

1 Like

@smahi what was the solution? I honestly can’t follow or parse the info correctly.

@StorageCluster
I my case the upload handler bows up because of an error that lead to the issue.
The solution is to check that the upload handler does not raise any error.