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.
