consofine
Phoenix LiveView file uploader says "No files chosen" even after choosing files
I’ve been working with LiveView’s live_upload component recently and it works great, but I do have a question about the input itself. Before selecting any files, the text next to the input says “No file chosen”. That makes sense, but then even after selecting files it still says “No file chosen”.
I’ve been able to successfully perform uploads and get the contents on the server, so the component appears to be working fine. Image previews for selected files also work, so I know when I have files chosen for upload. At first I figured this was an issue with my code, but after watching Chris McCord’s file upload deep dive, his demo worked the same way. (See 32:08, for example-- he’s selected two photos, but the text next to the input still says “No files selected”).
So my question is: what’s the expected functionality here? Why does that “No file chosen” text never seem to change? It’s obviously not a huge concern since the component is functioning for me, but it feels like I’m missing something.
Thanks in advance!
Most Liked
MitchellJeppson
Just in case anyone else stumbles upon this with the same issue. I was able to find a workaround:
<.live_file_input upload={@uploads.img} class="hidden" />
<label for={@uploads.img.ref} class="<styles like a button>">
attach files
</label>
<label>
@file_chooser_text
</label>
then you can customize the @file_chooser_text as needed.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
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
- #performance
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.
Develop your skills with books, videos, and courses.
Enabling companies to succeed by building software people love.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"