sergio
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?
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?
Marked As Solved
munksgaard
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
Also Liked
larshei
Just a small note for anyone who struggles with uploads simply not doing anything:
- The
live_file_inputmust be inside aformelement - Uploads require
phx-changeon the form. Thehandle_event/3callback does not need to do anything, it may just return{:noreply, socket}.
c4710n
- Auto uploading can be set by the
auto_upload: trueoption ofPhoenix.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}))
r4z4
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 
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"