Bootstrap : Show file name after select
<p>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: <a href="http://codepen.io/isharief318/pen/beVLvG" rel="nofollow">codepen here</a></p>

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

<p>Any help will be greatly appreciated</p>