Как у input type file убрать кнопку, но показывать название файла который выбрали

Частая задача - красиво оформить поле для прикрепления файла.

Основной проблемой тут является то, что сам элемент input type="file" через CSS кастомизировать можно плохо, поэтому его просто скрывают и оформляют кнопку место его кнопку, ссылку, label...

Но и тут есть проблема, обычно, такие кнопки не отображают файл который был выбран пользователем и, иногда, посетители сайта не могут понять, прикрепился их файл или нет.

Для реяние этой проблемы подойдет небольшой JS скрипт:

 
<form>
    <input id="so_file" type="file" style="display:none;"/>
</form>

<button id="bntUpload">Add File</button>
<span id="selected_filename">No file selected</span>

 
$(document).ready( function() {
    $('#bntUpload').click(function(){
        $("#so_file").click();
    });
    
    $('#so_file').change(function() {
        $('#selected_filename').text($('#so_file')[0].files[0].name);
    });
});