Handling live upload timeouts

I’m wondering if there is a way to be notified of the scenario where an in-progress LiveView Upload times-out and is canceled. In my experience, the upload entry is silently removed from socket.assigns.uploads.upload_name.entries without alerting the owning liveview in any way. This makes it difficult to tell what actually happened and to act accordingly. Is there some api that I am missing or some other way of handling this that I haven’t thought of?

Detailed Reproduction and Explanation

Suppose we have the following liveview with a form with a single live upload.

defmodule MyAppWeb.SimpleLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> allow_upload(:my_upload,
       accept: ~w(image/jpeg image/png),
       auto_upload: true,
       progress: &handle_progress/3,
       # very low to reproduce timeouts
       chunk_timeout: 1
     )
     |> assign(progress: 0, submitted: false)}
  end

  defp handle_progress(:my_upload, entry, socket) do
    IO.inspect(entry.progress, label: "Progress")
    {:noreply, assign(socket, progress: entry.progress)}
  end

  def handle_event("validate", _params, socket) do
    IO.inspect("VALIDATE")
    {:noreply, socket}
  end

  def handle_event("save", _params, socket) do
    IO.puts("SUBMIT")
    IO.inspect(socket.assigns.uploads, label: "Uploads")
    {:noreply, assign(socket, submitted: true)}
  end

  def render(assigns) do
    ~H"""
    <form class="group" id="upload-form" phx-submit="save" phx-change="validate">
      <label class="block">
        <.live_file_input upload={@uploads.my_upload} class="hidden" /> Upload
      </label>
      <div><%= @progress %> / 100</div>

      <button type="submit">Submit</button>

      <div class="hidden group-[.phx-submit-loading]:block ">
        Submitting
      </div>
      <%= inspect(@uploads[:my_upload]) %>
    </form>

    <div>Submitted: <%= @submitted %></div>
    """
  end
end

If you attempt to upload a file with this liveview, you’ll notice that the progress is updated on the first chunk upload. After that, the upload is canceled because we hit the very low chunk_timeout. (It’s set so low to force the reproduction. You can also reproduce by leaving it at the default of 10s and change your network speed via Chrome dev tools.) At this point, the entry is removed but our liveview was not notified of this and thus cannot update its state to reflect it. Thus, our progress state remains in a broken state.

Is there any way for our liveview to respond to the fact that the upload was canceled and that the entry has been removed? Of course we could conditionally render content based on the contents of socket.assigns.uploads.my_upload.entries but that feels wrong and doesn’t solve the problem of our assigns being in a weird state.

1 Like

This doesn’t feel wrong to me. You can fix the assigns by that checking my_upload.entries in the :my_upload callback and cleaning them up if it’s empty. Maybe someone else has a fancier solution but that’s how I would do it without a second thought :sweat_smile:

You can of course additionally also set some error state when this happens.