mendrik
I’m trying to implement multiple file upload buttons inside the same live_view. I have this kind of code:
defmodule AlbumWeb.AlbumLive do
use AlbumWeb, :live_view
alias Album.HashedIds
alias Integer
require Logger
def mount(%{"id" => id}, _session, socket) do
album_id = HashedIds.decode!(id)
album = Album.get_album!(album_id)
pages_per_album = Application.get_env(:album, :pages_per_album, 10)
{:ok, assign(socket, album: album, pages_per_album: pages_per_album)}
end
def render(assigns) do
~H"""
<div class="flex-1 book_holder">
<div class="book" style="--c: 0;--translate: 0;">
<%= for page <- 0..(@pages_per_album - 1) do %>
<PageComponents.photo_page page={page}>
<:front>
<.live_component
module={AlbumWeb.PhotosetLive}
id={page * 2}
page={page * 2}
album={@album}
/>
</:front>
<:back>
<.live_component
module={AlbumWeb.PhotosetLive}
id={page * 2 + 1}
page={page * 2 + 1}
album={@album}
/>
</:back>
</PageComponents.photo_page>
<% end %>
</div>
</div>
"""
end
end
which uses AlbumWeb.PhotosetLive a few times. PhotosetLive is defined like so
defmodule AlbumWeb.PhotosetLive do
use AlbumWeb, :live_component
# use def update_many(assigns_sockets) to load all photos in the albnum
def mount(socket) do
socket =
socket
|> assign(:uploaded_files, [])
|> allow_upload(:photoset, accept: ~w(.jpg .jpeg .png .webp), max_entries: 7)
{:ok, socket}
end
def handle_event("validate", _params, socket) do
{:noreply, socket}
end
def handle_event("save", _params, socket) do
uploaded_files =
consume_uploaded_entries(socket, :photoset, fn %{path: path}, _entry ->
dest = Path.join("priv/static/uploads", Path.basename(path))
IO.puts(path <> " -> " <> dest)
end)
{:noreply, update(socket, :uploaded_files, &(&1 ++ uploaded_files))}
end
attr :page, :integer, required: true
attr :album, Album.Album, required: true
def render(assigns) do
~H"""
<div>
<div>photos</div>
<div>
<%= for entry <- @uploads.photoset.entries do %>
<%= entry.client_name %> - <%= entry.progress %>%
<% end %>
<form phx-submit="save" phx-change="validate">
<%= live_file_input(@uploads.photoset) %>
<button type="submit">Upload</button>
</form>
</div>
</div>
"""
end
end
this crashes by page with
ArgumentError at GET /albums/1Ovxpva
assign/3 expects a socket from Phoenix.LiveView/Phoenix.LiveComponent or an assigns map from Phoenix.Component as first argument, got: %{accept: ".jpg,.jpeg,.png,.webp", __given__: %{accept: ".jpg,.jpeg,.png,.webp"}}You passed an assigns map that does not have the relevant change tracking information. This typically means you are calling a function component by hand instead of using the HEEx template syntax. If you are using HEEx, make sure you are calling a component using:
<.component attribute={value} />
If you are outside of HEEx and you want to test a component, use Phoenix.LiveViewTest.render_component/2:
Phoenix.LiveViewTest.render_component(&component/1, attribute: "value")
Would anyone have a pointer what I am doing wrong? I also tried only one component but it gives the same error. It’s pretty text book implementation so far, and I’m very new to phoenix and elixir.
Trending in Questions
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
New
Documentation
While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
Hello,
I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind.
However, when I launch mix phx.server, I get an error...
New
Hi everyone,
I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding.
I sta...
New
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
I’m working on a small exercise involving update_in/3, and I came up with this solution:
data = %{
name: "Periodic Table",
category:...
New
I’ve got trouble wrapping my head around the order in which functions are called in this snippet (from Phoenix’s authentication):
toke...
New
Other Trending Topics
Edit: 2026 May 15 - This post is archived.
Mob is alive!!
Main docs: mob v0.7.11 — Documentation
A bit of explanation for the slightly c...
New
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
I am happy to introduce the very α version of the new programming language compiled to BEAM.
Welcome Cure.
It has literally three kille...
New
Hobbes is a low-level distributed database for the Elixir programming language.
Hobbes provides a simple, safe, and scalable storage lay...
New
Hi everyone!
The first release candidate for the Expert language server project is now available!
We’ve published a press release detai...
New
A little off-topic, but I feel like people here have a good head on their shoulders.
I used to be quite good at making software. Was luc...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ai
- #ecto-query
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #metaprogramming
- #hex










Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
mendrik
Upon further debugging, it’s this line that causes the error:
<%= live_file_input(@uploads.photoset) %>
I have inspected the socket and @uploads.photoset is set, I have also tried <%= live_file_input(@uploads) %>, but it doesn’t work either
mendrik
problem was with using
<%= live_file_input(@uploads.photoset) %>instead of<.live_file_input upload={@uploads.photoset}/>