LiveView Uploads: resuming on cancel with auto_upload

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>

6 comments

/phoenix #file-uploading #liveview

5 2452 6

2023-08-27 03:02:33 UTC

Most Liked

svilen

Author of Concurrent Data Processing in Elixir

I have a workaround, which is a bit of a hack… Here it is for anyone interested:

I noticed that live_view.js simply dispatches an input event to the drop target here so I created a hook that triggers the event:

Hooks.ResumeUpload = {
  mounted() {
    this.handleEvent('resume_upload', ({id}) => {
      const dropTarget = document.getElementById(id);
      dropTarget.dispatchEvent(new Event('input', { bubbles: true }));
    });
  },
};

The hook subscribes to a resume_upload event, which is triggered when you cancel an upload:

def handle_event("cancel_upload", %{"ref" => ref}, socket) do
  socket =
    socket
    |> cancel_upload(:images, ref)
    |> push_event("resume_upload", %{id: socket.assigns.uploads.images.ref})

  {:noreply, socket}
end

and in the template I just had to find a place for the hook:

<div id="upload-section" phx-hook="ResumeUpload">
  <!-- same code as before ... -->
</div>

I wonder if there is a better way to accomplish this

Post #2

envixo

Thanks for sharing the solution.

Post #3

enkr1

This workaround is working fine but im just curious why is this not fixed/handled in the phoenix live view?

Post #5

Last Post!

emadalam

Stumbled upon this post while trying to see if there was any better way than what I had already implemented. This is what I do for now and so far it works nicely without the need to call cancel on individual entries.

      def handle_event("validate", _params, socket) do
        {:noreply, socket |> ignore_invalid_entries(:images)}
      end

      defp ignore_invalid_entries(socket, upload_identifier) do
        uploads = socket.assigns.uploads
        upload_configs = uploads |> Map.get(upload_identifier)

        cond do
          upload_configs |> Map.get(:errors) == [] ->
            socket |> assign(:invalid_entries, [])

          upload_errors(upload_configs) != [] ->
            socket

          true ->
            upload_entries = upload_configs |> Map.get(:entries)
            valid_entries_list = upload_entries |> Enum.filter(& &1.valid?)
            invalid_entries_list = upload_entries -- valid_entries_list

            updated_upload_config = %{upload_configs | entries: valid_entries_list, errors: []}
            updated_uploads = uploads |> Map.put(upload_identifier, updated_upload_config)

            invalid_entries =
              invalid_entries_list |> Enum.map(&{&1, upload_errors(upload_configs, &1)})

            socket
            |> update(:uploads, fn _ -> updated_uploads end)
            |> assign(:invalid_entries, invalid_entries)
        end
      end

Furthermore, using the :invalid_entries assigns we can also show the feedback on the UI for all the ignored invalid entries.

Though everything works for now, it still feels a little odd to be manipulating the internals of the live upload assigns, maybe there is a better way now in 2023?

I did check this out after I stumbled upon this post. However upon digging deeper I saw a lot is going on inside the lv cancel_upload implementation. I’m no expert so I can’t comment on the performance implication of this, but for my use case I allow folder uploads via webkitdirectory attribute on live file input and I did see using cancel_upload version on individual entries took a little while longer for a folder with a few thousand files, at least on the dev setup. Maybe an expert can comment more on this.

Also, extending the original question, there’s one use case I’m unable to figure out yet and that is how to retry a failed upload for the :external_client_failure errors for individual files with other successful uploads in the same list.

Post #7