I need help updating the span text for each file uploader on my page. I want the default "Choose a file..." text to change to the selected filename.
Can someone assist me with this? Here is a Js fiddle that I've been working on.
This is my HTML markup:
<p class="hide_this last" style="display: none;">
<span class="wpcf7-form-control-wrap file-05">
<input type="file" name="file-05" size="40" class="wpcf7-form-control wpcf7-file" id="file-05" aria-invalid="false">
</span>
<label for="file-05"><span>Choose a file...</span></label><br>
<a class="del_file" href="#">Remove</a>
</p>
This is my JS code:
//hide all inputs except the first one
$('p.hide_this').not(':eq(0)').hide();
//functionality for add-file link
$('a.add_file').on('click', function(e){
//show by click the first one from hidden inputs
$('p.hide_this:not(:visible):first').show('slow');
e.preventDefault();
});
//functionality for del-file link
$('a.del_file').on('click', function(e){
//var init
var input_parent = $(this).parent();
var input_wrap = input_parent.find('span');
//reset field value
input_wrap.html(input_wrap.html());
//hide by click
input_parent.hide('slow');
e.preventDefault();
});