smahi

smahi

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 %>

Marked As Solved

smahi

smahi

@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.

Also Liked

sfusato

sfusato

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.

StorageCluster

StorageCluster

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

Where Next?

Popular in Questions Top

_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
JulienCorb
I am trying to implement my new.html.eex file to create new posts on my website. new.html.eex: &lt;h1&gt;Create Post&lt;/h1&gt; &lt;%= ...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call t...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New

We're in Beta

About us Mission Statement