Upload cancellation with LiveView External Uploads

While implementing a LiveView external upload to S3 I noticed that the default cancellation mechanism doesn't properly terminate the upload. The upload is cancelled within the LiveView state, but the browser will continue to upload the file via XMLHttpRequest and never gets terminated. When uploading large files or handling file processing automatically on upload via Lambda or this is especially problematic. Thankfully, the fix is very simple.

Below is the JS uploader example from the docs with a few lines added to handle cancellation of the xhr request.

let Uploaders = {}

Uploaders.S3 = function(entries, onViewError){
  entries.forEach(entry => {
    let formData = new FormData()
    let {url, fields} = entry.meta
    Object.entries(fields).forEach(([key, val]) => formData.append(key, val))
    formData.append("file", entry.file)
    let xhr = new XMLHttpRequest()
    onViewError(() => xhr.abort())
    xhr.onload = () => xhr.status === 204 ? entry.progress(100) : entry.error()
    xhr.onerror = () => entry.error()
    xhr.upload.addEventListener("progress", (event) => {
        let percent = Math.round((event.loaded / event.total) * 100)
        if(percent < 100){ entry.progress(percent) }
    abortUpload = () => xhr.abort();

    window.addEventListener(`phx:cancel-${entry.ref}`, abortUpload, {
      once: true,

    xhr.upload.addEventListener("loadend", () =>
      window.removeEventListener(`phx:cancel-${entry.ref}`, abortUpload)


    xhr.open("POST", url, true)

let liveSocket = new LiveSocket("/live", Socket, {
  uploaders: Uploaders,
  params: {_csrf_token: csrfToken}

The new lines 20-32 create a cancel event listener that will abort the xhr request if a phx:cancel-{uploadref} event is triggered. If the load completes (success or error), the xhr loadend event is triggered and will clean up the cancel listener.

Now, the only thing we have to do is push a cancel event from the LiveView.

  @impl true
  def handle_event("cancel-upload", %{"ref" => ref}, socket) do
     # This is the new line that cancels the xhr request
     |> push_event("cancel-#{ref}", %{})
     |> cancel_upload(:video, ref)}

That's it. Now when the user cancels the upload, the browser will actually stop uploading the file.