JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form>
  <input type="text" class="form-control" name="inputFileText" disabled>
  <br>
  <input type="file" name="inputFile" class="file btn btn-default center-block" title="Add file">
</form>

CSS

body {
  padding: 25px;
}

JavaScript

/*
  Bootstrap - File Input
  ======================

  This is meant to convert all file input tags into a set of elements that displays consistently in all browsers.

  Converts all
  <input type="file">
  into Bootstrap buttons
  <a class="btn">Browse</a>

*/
(function($) {

  $.fn.bootstrapFileInput = function() {

    this.each(function(i, elem) {

      var $elem = $(elem);

      // Maybe some fields don't need to be standardized.
      if (typeof $elem.attr('data-bfi-disabled') != 'undefined') {
        return;
      }

      // Set the word to be displayed on the button
      var buttonWord = 'Browse';

      if (typeof $elem.attr('title') != 'undefined') {
        buttonWord = $elem.attr('title');
      }

      var className = '';

      if (!!$elem.attr('class')) {
        className = ' ' + $elem.attr('class');
      }

      // Now we're going to wrap that input field with a Bootstrap button.
      // The input will actually still be there, it will just be float above and transparent (done with the CSS).
      $elem.wrap('<a class="file-input-wrapper btn btn-default ' + className + '"></a>').parent().prepend($('<span></span>').html(buttonWord));
    })

    // After we have found all of the file inputs let's apply a listener for tracking the mouse movement.
    // This is important because the in order to give the illusion that this is a button in FF we actually need to move the button from the file input under the cursor. Ugh.
    .promise().done(function() {

      // As the cursor moves over our new Bootstrap button we need to adjust the position of the invisible file input Browse button to be under the cursor.
      // This gives us the pointer cursor that FF denies us
      $('.file-input-wrapper').mousemove(function(cursor) {

        var input, wrapper,
          wrapperX, wrapperY,
          inputWidth, inputHeight,
          cursorX, cursorY;

        // This wrapper element (the button surround this file input)
        wrapper = $(this);
  ...