I’m currently implementing the brand new LiveView Uploads, using the auto_upload setting, and I have a situation which I’m not sure how to resolve.

The uploader is configured to handle multiple images, with auto_upload: true:

socket
|> allow_upload(:images,
  accept: [".jpg", ".jpeg", ".png"],
  auto_upload: true,
  progress: &handle_progress/3,
  max_file_size: 5 * 1024 * 1024,
  max_entries: 20
)

The actual file upoad input is hidden, so we have drag and drop only.

When you drop a bunch a files, and they are all valid, the upload starts and everything works as expected. However, if there is a single file that’s invalid, the whole batch of files stops. I have implemented a cancel button so you can cancel individual files from the UI:

  def handle_event("cancel-upload", %{"ref" => ref}, socket) do
    {:noreply, cancel_upload(socket, :images, ref)}
  end

The problem I’m facing is that after I cancel the invalid file(s), the remaining valid files does not resume uploading. Unless I submit the form or add drag and drop more files, nothing will get uploaded.

I’m looking for a way to “retry” uploading files or trigger auto_upload again, if all entries on the uploader are valid. Does anyone have any ideas how to do it?

Here is my template markup (simplified version) just for completeness:

<%= live_file_input @uploads.images, class: "is-hidden" %>

<div class="dropzone" phx-hook="DragOver" phx-drop-target="<%= @uploads.images.ref %>">
  Drag and drop your files here
</div>

<table class="uploads-in-progress table">
  <tbody>
    <%= for entry <- @uploads.images.entries do %>
      <tr>
        <td class="<%= if !entry.valid?, do: "has-text-danger" %>"><%= entry.client_name %></td>
        <td><progress class="progress" value="<%= entry.progress %>" max="100"><%= entry.progress %></progress></td>
        <td class="has-text-danger"><span class="is-clickable" phx-click="cancel-upload" phx-value-ref="<%= entry.ref %>">Cancel</span></td>
      </tr>
    <% end %>
  </tbody>
</table>