How to get Liveview upload to automatically submit?

Questions & Help Questions
,
1

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
image377×489 13.8 KB

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?

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

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!

4

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

5

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

image

6

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.

7

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
8

Thank you for pointing that out, sweet!

9

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}.
10

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 :slight_smile:

11

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.