Customize Upload Feature working but not showing File Name

Question

I'm trying to customize my file upload feature. The code works fine, but does not show the file upload's name.

I've tried to use JavaScript to display the name in the 'span' tag but it isn't working.

Could you help me spot the problem with the code below.

Thanks in advance!


<script>

$('#getFile').change(function(){
$('#fileName').text($('#getFile')[0].files[0].name);
});

</script>
 
<span id="fileName">No file selected</span></font>
<input type="file" name="file" id="getFile" style="display: none">
<a style="text-decoration: none;" onclick="document.getElementById('getFile').click()">
Browse File ...
</a>

Does [this answer](https://stackoverflow.com/a/8716680/13561410) help? This may be a classic problem of searching for an element before it exists in the DOM. — Oskar Grosser, Mar 13 '23 at 08:59

score 0 · Accepted Answer · answered Mar 21 '23 at 08:24

It was a Javascript problem.

This is how I fixed it.

<span id="fileName">No file selected</span></font>
<input type="file" name="file" id="getFile" style="display: none" onchange="uploadFile(this)">
<a style="text-decoration: none;" onclick="document.getElementById('getFile').click()">
Browse File ...
</a>

<script>
function uploadFile(target){
   document.getElementById('fileName').innerHTML = target.files[0].name;
}
</script>

Customize Upload Feature working but not showing File Name

1 Answers1