How to get Liveview upload to automatically submit?

Questions / Help
,
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

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