No way to cancel external upload

[balexand]

Environment

• Elixir version (elixir -v): 1.16.3
• Phoenix version (mix deps): 1.7.12
• Phoenix LiveView version (mix deps): 0.20.14
• Operating system: Mac OS (latest)
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: yes

Actual behavior

I'm doing video upload to Mux using the UpChunk library as described in https://hexdocs.pm/phoenix_live_view/uploads-external.html. I can cancel the upload by calling Phoenix.LiveView.cancel_upload/3. This clears the upload entry in the live view but it doesn't cancel the client-side upload. The upload continues to run and consume bandwidth until it completes or until the browser is refreshed.

Expected behavior

I would expect there to be a way to cancel an external upload in a way that stops the upload in the browser. This could be implemented as a callback in the external upload JS that would get called when the upload is cancelled. That callback could then call the abort function in UpChunk or in the XHR. The upload guide does something like this with the onViewError callback but this callback is only called when there is a view error, not when the upload is cancelled.

[idabmat]

This might be helpful: https://web.archive.org/web/20230925091047/https://natetodd.com/improving-liveview-external-uploads/

TL;DR; When using cancel_upload you can fire a JS event. Add a listener for it in your uploader config to stop the xhr request.

Maybe this could be added to the docs?