Source: Adding Filename Feedback to (Stylized) Foundation File Upload Buttons sur Foundation forum.
The Problem:
Foundation has support for stylizing file inputs by adding a label element — but currently — after the user chooses a file from his/her system, there is no feedback that shows that a file was selected. The button’s text remains the same (e.g. « Upload File ») and doesn’t display the filename the user selected, causing the user to wonder if the file was actually selected.
The Solution:
To add feedback, you can add a small amount of JS code. Here’s an example that targets all input files using the example that Foundation uses on their Forms page.
HTML:
|
1 2 |
<label for="exampleFileUpload" class="button">Upload File</label> <input type="file" id="exampleFileUpload" class="show-for-sr"> |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(function(){ // Attach the change event listener to change the label of all input[type=file] elements var els = document.querySelectorAll("input[type=file]"), i; for (i = 0; i < els.length; i++) { els[i].addEventListener("change", function() { var label = this.previousElementSibling; label.innerHTML = this.files[0].name; }); } })(); |
Tested working in Foundation 6.3.0
(Note: If using this code, you may want to use a named function instead of recreating an anonymous function in each iteration of the for loop.)
You may want to do some quick validation on this.files before setting the label’s innerHTML or leave the label’s innerHTML alone to keep the button as is and write the file name in another div next to it. There are also other things to consider such as multiple file uploads (in which you could signify the number of files as feedback for that use-case). It would be great if Foundation could possibly add this feature in the future.
Hope this helps,
Roy