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.