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.