Create multi-image upload with liveview and add descriptions to each image

I’m struggling to create a form where the user should be able to upload multiple images and add descriptions for each of them. The idea is to add them as embeds to a resource (in this case a post resource).

defmodule MyApp.Post do
  use Ecto.Schema

  schema "posts" do
    field :title, :string
    field :content, :string
 
    embeds_many :images, Image
  end
end

defmodule MyApp.Post.Image do
  use Ecto.Schema

  embedded_schema do
    field :image_url, :string # For simplicity. In reality it's a waffle upload
    field :description, :string
  end
end

So far I set up a basic form with a live file upload, that shows a preview of the uploaded files, but I don’t know how to progress from here. Any ideas?

<div phx-drop-target={@uploads.images.ref} class="my-2">
  <.h3><%= gettext("Images") %></.h3>
  <.live_file_input class="hidden" upload={@uploads.images} />
  <label
    for={@uploads.images.ref}
    class="flex justify-center items-center p-6 my-2 rounded-lg shadow-sm bg-slate-200 cursor-pointer hover:bg-slate-400"
  >
    <.h4 class="m-0"><%= gettext("Upload images") %></.h4>
  </label>
  <div class="grid grid-cols-2 gap-2">
    <%!-- component to render image previews + form inputs --%>
    <.image
      :for={entry <- @uploads.images.entries}
      field={@form[:images]}
      entry={entry}
      myself={@myself}
    />
  </div>
</div>

Here are the docs—They are detailed and short. I basically forget how to do image uploads every time I start a new project and I essentially copy paste everything on that page and it works beautifully (you just have to change the references to my_app). I’ve never used Waffle, though.