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

RSP87
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
New
kszambelanczyk
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
New
RemyXRenard
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
samoloth
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
New
FlyingNoodle
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
New
psy-q
I’m trying to set up Emacs with elixir-ls via lsp-mode and credo via Flycheck. This should mostly be preconfigured as Flycheck picks up c...
New

Other Trending Topics Top

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
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews