Phoenix LiveView file uploader says "No files chosen" even after choosing files

Phoenix Forum Questions / Help
, , ,
1

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!

6 Likes
2

Did you find a way to fix this ?

3

There likely is no “fix” because file inputs are finicky and also not really built around any of the usecases they’re commonly used in in modern websites/applications. What the input shows is completely driven by the browser and not really adjustable from js.

4

It’s most likely a label issue not syncing with the name of your input.

Double check your label is matching the ref of your upload.

5

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.

3 Likes