I did a minimum reproducing case: no sub-components, only live view, no dependencies on any changeset or inherited form data. There is only a form, 2 live file inputs.
When I call consume_uploaded_entries for :file1 it works, when I call for both - error is still there:
> cannot consume uploaded files when entries are still in progress
I enabled socket’s debug logs and see there next picture (in case of one call of consume_uploaded_entries).
#Selected files on form:
phx-FlDrOCcb2UykHOJj update: ... (file ref is phx-FlDrOFstQWyOAftH)
phx-FlDrOCcb2UykHOJj update: ... (file ref is phx-FlDrOFst1dyOAftn)
# Submitted form
phx-FlDrOCcb2UykHOJj upload: sending preflight request ... (file ref is phx-FlDrOFstQWyOAftH)
phx-FlDrOCcb2UykHOJj upload: sending preflight request ... (file ref is phx-FlDrOFst1dyOAftn)
phx-FlDrOCcb2UykHOJj update ... (file ref is phx-FlDrOFstQWyOAftH)
phx-FlDrOCcb2UykHOJj upload: got preflight response ... (file ref is phx-FlDrOFstQWyOAftH, entries are already here for )
phx-FlDrOCcb2UykHOJj update ... (2nd file ref is phx-FlDrOFst1dyOAftn)
phx-FlDrOCcb2UykHOJj upload: got preflight response ... ( entries are already here for phx-FlDrOFst1dyOAftn)
phx-FlDrOCcb2UykHOJj update ... multiple quite similar calls for both files.
Html template:
<div class="col-md-12">
<%= f = form_for :no_changeset, "#", [phx_change: :validate, phx_submit: :save, multipart: true] %>
<%= submit "Save Design", phx_disable_with: "Saving...", class: "btn btn-primary" %>
<div class="p-3">
<div class="custom-file">
<%= live_file_input @uploads.file1, class: "custom-file-input" %>
<label class="custom-file-label" for="customFile">File1</label>
</div>
<%= for entry <- @uploads.file1.entries do %>
<div class="badge badge-<%= if entry.progress == 100, do: "success", else: "info" %> p-2 mt-1"><%= entry.client_name %>
- <%= entry.progress %>%
</div>
<% end %>
</div>
<div class="p-3">
<div class="custom-file">
<%= live_file_input @uploads.file2, class: "custom-file-input" %>
<label class="custom-file-label" for="customFile">File2</label>
</div>
<%= for entry <- @uploads.file2.entries do %>
<div class="badge badge-<%= if entry.progress == 100, do: "success", else: "info" %> p-2 mt-1"><%= entry.client_name %>
- <%= entry.progress %>%
</div>
<% end %>
</div>
</div>
Live View:
defmodule BackOffice.SettingsLive.Test do
use BackOffice, :live_view
def mount(params, session, socket) do
{
:ok,
socket
|> allow_upload(:file1, accept: ~w(.jpg .jpeg .gif .png), max_entries: 2, max_file_size: 2_000_000)
|> allow_upload(:file2, accept: ~w(.jpg .jpeg .gif .png), max_entries: 2, max_file_size: 2_000_000)
}
end
def render(assigns) do
BackOffice.SettingsView.render("test.html", assigns)
end
def handle_params(_, _, socket) do
{:noreply, socket}
end
def handle_event("validate", p, socket) do
{:noreply, socket}
end
def handle_event("save", params, socket) do
consume_uploaded_entries(
socket,
:file1,
fn %{path: path}, entry ->
:timer.sleep(300)
path
end
)
# Fails with this call on 2nd live_file_input
# consume_uploaded_entries(
# socket,
# :file2,
# fn %{path: path}, entry ->
# :timer.sleep(300)
# path
# end
#)
{:noreply, socket}
end
end
After updating data in socket entry disappears from the list of entries for the first file, the 2nd one shows as 100% progress, but is still there (if I have only one call of consume_uploaded_entries)
The problem is that view crashes before 2nd uploading completed with error I posted above. As a result it reloads view and there is one more js error in console.
Can’t figure out what I am doing wrong
Uncaught TypeError: Cannot read property 'closest' of null
at e.value (phoenix_live_view.js?b42f:1)
at e.value (phoenix_live_view.js?b42f:1)
at e.value (phoenix_live_view.js?b42f:1)
at e.value (phoenix_live_view.js?b42f:1)
at Object.eval [as callback] (phoenix_live_view.js?b42f:1)
at eval (phoenix.js?7b71:1)
at Array.forEach (<anonymous>)
at e.value (phoenix.js?7b71:1)
at Object.eval [as callback] (phoenix.js?7b71:1)
at e.value (phoenix.js?7b71:1)