I saw that PR had been applied to enable LiveView File Upload, so I thought I would try it out. I’m relatively new to Elixir, Phoenix, LiveView, so what could possibly go wrong?

The guide makes it clear where to add the call to allow_update/3 for a LiveView, but I would like to add it to a form_component that opens in a modal window. I added a mount/1 function to the component below.

   defmodule LiveUploadWeb.PostLive.FormComponent do
      use LiveUploadWeb, :live_component
      alias LiveUpload.Blog

      @impl true

      def mount(socket) do
         IO.puts("in mount")

         newSocket =
            socket
            |> assign(:uploaded_files, [])
            |> allow_upload(:avatar, accept: ~w(.jpg .jpeg .png), max_entries: 1)

         IO.inspect(newSocket, label: "newSocket")

         {:ok, newSocket}
      end
   ...

The mount/1 function is called, and the uploaded_files and uploads assigns are added to the session.

in mount
Socket: #Phoenix.LiveView.Socket<
  assigns: %{
    flash: %{},
    myself: %Phoenix.LiveComponent.CID{cid: 2},
    uploaded_files: [],
    uploads: %{
      __phoenix_refs_to_names__: %{"phx-FkYRxX4PVOACIAIJ" => :avatar},
      avatar: #Phoenix.LiveView.UploadConfig<accept: ".jpg,.jpeg,.png", ...>
    }
  },

However, when I run the server, go to /posts, click ‘New Post’, click “Choose File” and select a file, I get an error message on the sever 'no uploads have been allowed’.

Can someone please explain how to allow uploads in a stateful component?

The repo is here. I explained each of the steps I followed in the README.md file. The README.md also includes the detailed error message.