mendrik

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.

Showing Posts 1 to 2

mendrik

mendrik OP

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 :thinking:

mendrik

mendrik OP

problem was with using <%= live_file_input(@uploads.photoset) %> instead of <.live_file_input upload={@uploads.photoset}/>

— All posts loaded —

Where Next? Top

Trending in Questions Top

katta
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
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
achenet
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
kpanic
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
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
Cxx-mlr
I’m working on a small exercise involving update_in/3, and I came up with this solution: data = %{ name: "Periodic Table", category:...
New
ChrisAmelia
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 Top

GenericJam
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
JesseHerrick
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
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
budgie
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

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews