Multi LivewView upload form and duplicate function execution

Hello, I implemented 2 allow upload in my LiveView project in a page. and with their help I insert a record to my database for 2 different fields. first time of execution my function is the job I need (2 images is sent) and the second time it has no first upload fields attachment.

what is my problem?

if I use one upload liveview in a page; all the things will be right and there is no problem, but if I use 2 upload fields, it executes my handle_event 2 times.

 |> allow_upload(:main_image_upload, accept: ~w(.jpg .jpeg .png), max_entries: 1, max_file_size: 10_000_000
 |> allow_upload(:header_image_upload, accept: ~w(.jpg .jpeg .png), max_entries: 1, max_file_size: 10_000_000)

and my insert query:

def handle_event("save", %{"category" => params}, socket) do

  uploaded_main_image_files = upload(socket, :main_image_upload)
  uploaded_header_image_files = upload(socket, :header_image_upload)

  case Category.create(Map.merge(params, %{"main_image" => List.first(uploaded_main_image_files),"header_image" =>  List.first(uploaded_header_image_files)})) do
    {:error, :add, :category, repo_error} ->
      {:noreply, socket}

    {:ok, :add, :category, repo_data} ->
      {:noreply, socket}

I find a solution for this problem which is auto_upload: true, that it uploads the files I needed before submitting form, Whether the record is saved or not, and I can get UUIDs of uploaded files and insert to my database.

but help me to upload files with 2 or more upload fields in a page after clicking submitting form btn with out auto_upload: true

I thing is there a way which is using Task, and I have no Ideas more than these.


Hi @shahryarjb - this is a known bug :slight_smile:

The reason auto_upload provides a fix is because auto_upload will defer the form submission if there are any pending/in-flight uploads.

We are working on a fix that does not require auto_upload to be set. You can follow along on the GitHub issue: Error with multiple live_file_input in one form · Issue #1347 · phoenixframework/phoenix_live_view · GitHub