How to get Liveview upload to automatically submit?

In Phoenix Liveview uploads, you need to surround the upload helper function in a form, with a submit button.

How can I build something a little more like Github’s experience where you can just upload the image and it gets sent to the server to update the user avatar?

image

I don’t really care about the dropdown.

Really what I’m looking for is having a button that triggers the file picker dialog, and then automatically submits the form would be a good UX for my usecase.

Any tips?

  • 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}))
2 Likes

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.

image

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
4 Likes

Thank you for pointing that out, sweet!