Capture and display a text from a hidden input

Question

I use this solution to change the button text of <input type="file" />. It works, but it have a small drawback - after a file was chosen the user will not see what file was selected, because this info is not displayed (it is hidden with the original button). How to make visible this information without to display the original (hidden) button?

The code:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

You could create a div and populate it with info from the `files` property in the input: https://stackoverflow.com/questions/26082721/how-to-display-selected-file-names-before-uploading-multiple-files-in-struts2 — yuriy636, Nov 18 '17 at 22:55
@lurie check the answer. let me know if you expected anything else — Muhammad Usman, Nov 18 '17 at 23:22

Muhammad Usman · Accepted Answer · 2017-11-19T00:33:45.497

1

You can create a span with no text in it and then update its value to the value of your input type of file. Something like

function showFileName(){
document.getElementById("fileName").innerHTML = document.getElementById("file").files[0].name

}

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<span id="fileName"></span>
<input type="file" onChange="showFileName()" style="display:none;" id="file" name="file"/>

edited Nov 19 '17 at 00:33

answered Nov 18 '17 at 23:04

Muhammad Usman

10,039
22
39

This works. The only problem is a "C:\fakepath\" part before the selected file name. I work in Ubuntu, so I don't know what will be displayed in a Windows system. Can be retained only the file name (with extension)? – Yurié Nov 18 '17 at 23:47
this will be the same in both environments. Anyways, I've edited the code to print the file name only. – Muhammad Usman Nov 19 '17 at 00:34
@lurie, please accept and upvote the answer if it resolved your query – Muhammad Usman Nov 19 '17 at 00:55
Glad to know that :) – Muhammad Usman Nov 19 '17 at 01:01

Tommaso Belluzzo · Answer 2 · 2017-11-19T00:20:33.203

1

You can add a placeholder element under your visible input:

<p id="file_path"></p>

Then (I used jQuery for this part), events side:

$('#file').change
(
    function(e)
    {
        $('#file_path').text(e.target.files[0]);
    }
);

edited Nov 19 '17 at 00:20

answered Nov 18 '17 at 23:17

Tommaso Belluzzo

23,232
8
74
98

I can't make it to work. I get this message in the Developer Tools Console: `Uncaught SyntaxError: Invalid or unexpected token`. – Yurié Nov 19 '17 at 00:02
Sorry, I fixed :O – Tommaso Belluzzo Nov 19 '17 at 00:21

Capture and display a text from a hidden input

2 Answers2