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?
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.
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}))
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