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…

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_pr…

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((…

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.

Just a small note for anyone who struggles with uploads simply not doing anything: The live_file_input must be inside a form element 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 belo…

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.

Elixir Programming Language Forum

How to get Liveview upload to automatically submit?

Questions & Help Questions

sergio June 2, 2023, 2:01pm 8

Thank you for pointing that out, sweet!