show name of file on custom input field - html

Question

i am using a custom file input on an upload page on my website and it is working as per my requirement the only issue is i have hidden the default layout of filetype="input" but i want to show the name of the file being uploaded so that the user may know which file he has uploadedand the name of the file here's the fiddle
JsFiddle
here's the html and css
<div class="custom-upload">
<div class="fake-file">
<input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
</div>
</div>
.custom-upload {
position: relative;
height: 40px;
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #625f5b;
}
.custom-upload input[type=file]
{
outline:none;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:100%;
height:100%;
}
.custom-upload .fake-file
{
background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}
.custom-upload .fake-file input
{
font-size:16px;
height:40px;
width: 100%;
}

Answer 1

Look at the JavaScript I added.
Note: I used jQuery. If you are using native JavaScript, I have to change the code
$(function(){
$("#fileToUpload").on('change',function(){
fpath = $(this).val();
$('#filePath').html('<b>You selected the file:</b> ' + fpath);
});
});
.custom-upload {
position: relative;
height: 40px;
width: 100%;
margin-top: 20px;
border-bottom: 1px solid #625f5b;
}
.custom-upload input[type=file]
{
outline:none;
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width:100%;
height:100%;
}
.custom-upload .fake-file
{
background:url(https://s4.postimg.org/hy3g354ot/upload.png) center right no-repeat;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
line-height: 100%;
}
.custom-upload .fake-file input
{
font-size:16px;
height:40px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-upload">
<div class="fake-file">
<input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
</div>
<div id="filePath">
</div>
</div>

Answer 2

Another choise could be without using jquery, but pure javascript. This is my solution.
<span id='filename'></span>
<div class="custom-upload">
<div class="fake-file">
<input placeholder="Choose File" type="file" name="fileToUpload" id="fileToUpload" />
</div>
</div>
<script>
document.getElementById('fileToUpload').addEventListener('change', function() {
var dest = document.getElementById('filename');
dest.innerHTML = document.getElementById('fileToUpload').value;
});
</script>
I let you the personalization of css of the elements to fit your needs.
Hope this help.