JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="input-group">
  <div class="form-control file-caption">
    <div class="file-caption-name"></div>
  </div>
  <div class="input-group-btn">
    <div class="btn-file">
      <span class="browse-text">Browse</span>
      <input type="file" id="input1">
    </div>
  </div>
</div>

CSS

.btn-file {
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  text-align: right;
  opacity: 0;
  background: none repeat scroll 0 0 transparent;
  cursor: inherit;
  display: block;
}

.file-caption-name {
  padding-top: 2px;
}

.browse-text {
  display: inline-block;
}

.file-caption-name {
  display: inline-block;
  overflow: hidden;
  height: 20px;
  word-break: break-all;
}

.file-caption {
  padding: 0 12px;
}


/* IE 10 fix */

.btn-file::-ms-browse {
  width: 100%;
  height: 100%;
}

JavaScript

$("#input1").on("change", function() {
  $(this).parents(".input-group").find(".file-caption .file-caption-name").text($(this).val());
});