bootstrap fileinput name in hidden textbox

Question

I am using jasny-bootrap fileinput:

<div class="fileinput fileinput-new" data-provides="fileinput">
  <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="name"></span>
  <span class="fileinput-filename"></span>
  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
<input type="hidden" name="namehidden"/>
</div>

When use select a file, how can I update the hidden file with a file name?

Answer 1

You can use the change event for updating the hidden input.

$('.fileinput').on('change.bs.fileinput', function (e) {
    var filename = $('.fileinput-filename').text();
    $('input[type="hidden"]').val(filename);
    alert($('input[type="hidden"]').val());
});

Demo