Nikolaycc

reconnect during upload

Environment

Elixir version (elixir -v): 1.15.4
Phoenix version (mix deps): 1.7.7
Phoenix LiveView version (mix deps): 0.19.5
Operating system: Ubuntu
Browsers you attempted to reproduce this bug on (the more the merrier): Firefox
Does the problem persist after removing “assets/node_modules” and trying again? Yes/no: no

Actual behavior

When I upload some file it reconnects

<form id="upload-form" phx-submit="savee" phx-change="vali">
      <div class="container" phx-drop-target={@uploads.image.ref}>
            <.live_file_input upload={@uploads.image} />   
      </div>
      <button type="submit">Upload</button>
</form>

[error] GenServer #PID<0.547.0> terminating
** (KeyError) key "phx-F3d9rya2kNrrOwUD" not found in: %{"phx-F3d9ryLkHbHrOwTD" => :image}
    :erlang.map_get("phx-F3d9rya2kNrrOwUD", %{"phx-F3d9ryLkHbHrOwTD" => :image})
    (phoenix_live_view 0.19.5) lib/phoenix_live_view/upload.ex:192: Phoenix.LiveView.Upload.get_upload_by_ref!/2
    (phoenix_live_view 0.19.5) lib/phoenix_live_view/channel.ex:1218: anonymous fn/3 in Phoenix.LiveView.Channel.maybe_update_uploads/2
    (stdlib 5.0.2) maps.erl:416: :maps.fold_1/4
    (phoenix_live_view 0.19.5) lib/phoenix_live_view/channel.ex:218: Phoenix.LiveView.Channel.handle_info/2
    (stdlib 5.0.2) gen_server.erl:1077: :gen_server.try_handle_info/3
    (stdlib 5.0.2) gen_server.erl:1165: :gen_server.handle_msg/6
    (stdlib 5.0.2) proc_lib.erl:241: :proc_lib.init_p_do_apply/3

5 comments

/phoenix #file-uploading #liveview

0 580 5

2023-08-09 07:50:52 UTC

Most Liked

D4no0

This is not a reconnect, that is a crash, the reconnect happens because the process is restarted by supervisor automatically.

Post #2

Last Post!

Nikolaycc

defmodule MmautoWeb.PartLive.FormComponent do
  use MmautoWeb, :live_component

  alias Mmauto.Accounts

  @impl true
  def render(assigns) do
    ~H"""
    <div>
      <.header>
        <%= @title %>
        <:subtitle>Use this form to manage part records in your database.</:subtitle>
      </.header>

      <.simple_form   
        for={@form}
        id="part-form"
        phx-target={@myself}
        phx-change="validate"
        phx-submit="save"
        multipart
      >
        <.input field={@form[:name]} type="text" label="Name" />
        <.input field={@form[:dec]} type="text" label="Made in" />
        <!-- <.input field={@form[:image]} type="file" label="image" /> THIS NOT WORKING  -->
        <.input field={@form[:price]} type="number" label="Price" />
        <.input field={@form[:brand]} type="text" label="Brand" />
        <.input field={@form[:model]} type="text" label="Model" />
        <.input field={@form[:pnum]} type="number" label="Part Number" />
        <.input field={@form[:instock]} type="checkbox" label="Instock" />
        <.input field={@form[:stock1]} type="number" label="Stock N1" />
        <.input field={@form[:stock2]} class="mx-2" type="number" label="Stock N2" />
        <.input field={@form[:stock3]} type="number" label="Stock N3" />
        <.input field={@form[:id]} type="text" label="Id" />
        <:actions>
          <.button phx-disable-with="Saving...">Save Part</.button>
        </:actions>
      </.simple_form>
      <!-- same here -->
      <form id="upload-form" phx-submit="savee" phx-change="vali">
      <div class="container">
      <.live_file_input upload={@uploads.image} />   
      </div>
      <button type="submit">Upload</button>
      </form>
    </div>
    """
  end

  @impl true
  def mount(_params, _session, socket) do
    {:ok, socket
    |> assign(:upload_file, nil)
    |> allow_upload(:image, accept: ~w(.jpg .jpeg .png), max_entries: 1)
    }
  end

  
  @impl true
  def update(%{part: part} = assigns, socket) do
    changeset = Accounts.change_part(part)

    {:ok,
     socket
     |> assign(assigns)
     |> assign_form(changeset)
     |> allow_upload(:image, accept: ~w(.jpg .jpeg .png), max_entries: 1)}
  end

  @impl true
  def handle_event("validate", params, socket) do
    part_params = params["part"]
    IO.inspect socket.assigns
 
    changeset =
      socket.assigns.part
      |> Accounts.change_part(part_params)
      |> Map.put(:action, :validate)

    {:noreply, assign_form(socket, changeset)}
  end

  @impl true
  def handle_event("vali", %{"image" => image}, socket) do
      IO.inspect image

      changeset =
                socket
                |> assign(:id, nil)

      {:noreply, assign_form(socket, changeset)}
  end

  @impl true
  def handle_event("vali", %{"image" => image}, socket) do
      IO.inspect image
      IO.inspect socket.assigns

      changeset =
                socket
                |> assign(:id, nil)

      {:noreply, assign_form(socket, changeset)}
  end

  def handle_event("save", %{"part" => part_params}, socket) do
    IO.inspect part_params
    save_part(socket, socket.assigns.action, part_params)
  end

  def handle_event("savee", param, socket) do
    IO.inspect param
    IO.inspect socket.assigns
    {:noreply, socket}
  end

  defp save_part(socket, :edit, part_params) do
    case Accounts.update_part(socket.assigns.part, part_params) do
      {:ok, part} ->
        notify_parent({:saved, part})

        {:noreply,
         socket
         |> put_flash(:info, "Part updated successfully")
         |> push_patch(to: socket.assigns.patch)}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign_form(socket, changeset)}
    end
  end

  defp save_part(socket, :new, part_params) do
    IO.puts "New"
    IO.inspect part_params

    IO.puts "hello" 
    IO.inspect socket.assigns.uploads.image
    case Accounts.create_part(part_params) do
      {:ok, part} ->
        notify_parent({:saved, part})

        {:noreply,
         socket
         |> put_flash(:info, "Part created successfully")
         |> push_patch(to: socket.assigns.patch)}

      {:error, %Ecto.Changeset{} = changeset} ->
        {:noreply, assign_form(socket, changeset)}
    end
  end

  defp assign_form(socket, %Ecto.Changeset{} = changeset) do
    assign(socket, :form, to_form(changeset))
  end

  defp notify_parent(msg), do: send(self(), {__MODULE__, msg})
end

Post #6