JSFiddle - React, Tailwind, and code Playground

by Denis Tverdokhlebov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<span class="input_file">
  <span class="form-group">
    <input type="file" name="file" id="file" class="input-file">
    <label for="file" class="btn btn-tertiary js-labelFile">
      <i class="icon fa fa-check"></i>
      <span class="js-fileName">Загрузить файл</span>
    </label>
  </span>
</span>

CSS

.input_file .btn-tertiary {
  color: #555;
  padding: 0;
  line-height: 40px;
  width: 300px;
  margin: auto;
  display: block;
  border: 2px solid #555
}

.input_file .btn-tertiary:hover,
.input_file .btn-tertiary:focus {
  color: #888;
  border-color: #888
}

.input_file .input-file {
  width: .1px;
  height: .1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1
}

.input_file .input-file+.js-labelFile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px;
  cursor: pointer
}

.input_file .input-file+.js-labelFile .icon:before {
  content: "\f093"
}

.input_file .input-file+.js-labelFile.has-file .icon:before {
  content: "\f00c";
  color: #5AAC7B
}

JavaScript

(function() {
 
  $('.input-file').each(function() {
    var $input = $(this),
        $label = $input.next('.js-labelFile'),
        labelVal = $label.html();
     
   $input.on('change', function(element) {
      var fileName = '';
      if (element.target.value) fileName = element.target.value.split('\\').pop();
      fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
   });
  });
 
})();