Beginner Beginner - 5 months ago 82
HTML Question

Bootstrap : Show file name after select

In my form I have a file upload button. I want to show the file name that has been selected. However I cant seem to grab the name of the file and show it in my text box: codepen here

<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary">
Browse&hellip; <input id="my-file-selector" type="file" style="display:none;" onchange="$('#upload-file-info').html($(this).val());">
</span>
</label>
<input type="text" class="form-control" id="upload-file-info" readonly>
</div>


Any help will be greatly appreciated

Answer

You need to set the Val for the input too ... change it:

From .html() to .val()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
    <label class="input-group-btn">
        <span class="btn btn-primary">
            Browse&hellip; <input id="my-file-selector" type="file" style="display:none;" onchange="$('#upload-file-info').val($(this).val());">
        </span>
    </label>
    <input type="text" class="form-control" id="upload-file-info" readonly>
</div>

Updated CodePen

Comments