ファイルのアップロードが2度選択されるまで機能しない

Question

ファイル入力機能が動作するには、なぜ2回クリックして選択する必要があるのだろうと思っています。最初に選択するときは、2番目の時間を選択するまで選択されません。

<div class="3u 12u$(small)"> 
    <button name="buttonupload" id="buttonupload" class="special"> 
    <i class="fa fa-cloud-upload fa-2x" aria-hidden="true"></i> 
    Upload Logo 
    </button> 
    <input id="file-upload" style="visibility:hidden;" type="file"> 
</div> 
<div class="3u 12u$(small)"> 
    <span id="filename" style="font-family: "></span> 
</div> 

$(function() { 
    $('#buttonupload').click(function() { 
    $('#file-upload').trigger('click'); 
    $('#filename').text($('#file-upload:file').val()); 
    }); 
}); 

Answer 1

あなただけのファイルアップロードボタンのスタイルを設定したいように、これはここで回答されているルックス：https://stackoverflow.com/a/25825731/7105611