JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<div class="my-btn btn btn-lg btn-block ">
  <div class="btn btn-lg btn-block btn-warning">Выберите файл</div>
  <input type="file">
</div>

CSS

body {
  width:300px;
}
.my-btn {
  position:relative;
  padding:0px!important;
  cursor:pointer;
  overflow:hidden;
}
.my-btn > div {
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
}
.my-btn > input[type="file"] {
  opacity:1;
  cursor:pointer;
  padding: 10px 16px;
}

JavaScript

$('input').on('change', function(){
  var name = this.files[0].name
  $('.btn-warning').html(name)
})