maqnius

maqnius

Adding Titles to Image Uploads

Hey there,

I’m trying to add titles to the images being uploaded using the uploads guide.

After tinkering a bit, I asked our beloved AI tools. What they suggest is maintaining a separate metadata map and creating the necessary structure by using a metadata[#{entry.uuid}][title] input name. So something along the following lines:

...
<.live_file_input upload={@uploads.image} />
        <section phx-drop-target={@uploads.image.ref}>
          <%!-- render each image entry --%>
          <article :for={entry <- @uploads.image.entries} class="upload-entry">
            <figure>
              <.live_img_preview entry={entry} />
              <figcaption>{entry.client_name}</figcaption>
            </figure>
            
            <%!-- extra input to add an image title --%>
            <.input
              name={"metadata[#{entry.uuid}][title]"}
              type="text"
              label="Titel"
              value={get_image_metadata(@image_metadata, entry.ref, :description)}
              phx-change="update-image-metadata"
            />
...

While this should work, it just feels a little hacky to render this input so raw and manual.

Is there a cleaner approach, where I can eg. lean more on the Phoenix.HTML.FormField abstraction and use <.input field={@image_form[entry.uuid][:title]} ... or similar?

Thanks :slight_smile:

Where Next?

Popular in Questions Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 44139 214
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New

We're in Beta

About us Mission Statement