How to get Liveview upload to automatically submit?

• Auto uploading can be set by the auto_upload: true option of Phoenix.LiveView.allow_upload/3
• Auto submitting can be triggered by serveral ways. The one I used is to trigger it in the callback of JS uploader with form.dispatchEvent(new Event("submit", {bubbles: true, cancelable: true}))

Nice, so using the Uploaders.S3 example from the docs, it looks something like this:

Uploaders.S3 = function (entries, onViewError) {
  console.log(entries);

  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) => {
      if (event.lengthComputable) {
        let percent = Math.round((event.loaded / event.total) * 100);
        if (percent < 100) {
          entry.progress(percent);
        }
      }
    });

    // Only autosubmit the form if uploading one file.
    if (entries.length == 1) {
      xhr.upload.addEventListener("load", (_event) => {
        const form = entry.fileEl.closest("form");
        form.dispatchEvent(
          new Event("submit", { bubbles: true, cancelable: true })
        );
      });
    }

    xhr.open("POST", url, true);
    xhr.send(formData);
  });
};

Specifically the load event is what we’re looking to attach to. Works great!

It would be better to check the xhr.status before submitting, because the xhr request may fail.

According to the docs the load event only happens when the upload completed successfully.

HTTP request returning 2XX code will be considered as success.

Above code is checking the xhr.status === 204 , I simply think the all the load event handlers should consider this condition as success.

If anyone is stumbling over this now, it seems like the official Phoenix documentation has a solution now.

In short, auto_upload: true can be paired with a progress handler which handles the file once it has been completely uploaded:

allow_upload(socket, :avatar, accept: :any, progress: &handle_progress/3, auto_upload: true)

defp handle_progress(:avatar, entry, socket) do
  if entry.done? do
    uploaded_file =
      consume_uploaded_entry(socket, entry, fn %{} = meta ->
        {:ok, ...}
      end)

    {:noreply, put_flash(socket, :info, "file #{uploaded_file.name} uploaded")}
  else
    {:noreply, socket}
  end
end

Thank you for pointing that out, sweet!

Just a small note for anyone who struggles with uploads simply not doing anything:

1. The live_file_input must be inside a form element
2. Uploads require phx-change on the form. The handle_event/3 callback does not need to do anything, it may just return {:noreply, socket}.

This was great and thanks everyone for the help. I do have a follow up, though. Was wondering if anyone has any ideas on how to prevent the phx-change trigger, returning a simple {:noreply, socket}, from performing a refresh and resetting all of my other form inputs. I have the .live_input form below another .simple_form with the idea that the user might fill out some fields, attach an upload, continue filling out the rest of the fields.

Kinda struggling to think of a good way out here. I imagine I could put it in its own LiveView but that seems a little much, since it already appears to be in its own LiveView? I think the “best” solution I have so far is to somehow get the current state of the form at upload and repopulate, but that again seems a little overdone.

Just wondering if I am missing something or if someone out there might have any ideas. Thanks all

In addition..

Note that the upload will not start when for example the file is larger than max_file_size.
This will not trigger any error or interaction so auto_upload will “fail” silently.
handle_progress/3 will not be called so it might seem like auto upload is not working.