File input button component problem...Whipping File Inputs Into Shape with Bootstrap 3...

file_input_button.css

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

file_input_button.html

<span class="btn btn-default btn-file">
  Browse <input type="file">
</span>

file_input_button.js

// Providing feedback
// Now with the hard part out of the way, it’s a good practice to provide users 
// with a bit of feedback about their selection. A touch of jQuery magic will 
// keep an eye on your file inputs and fire an event called fileselect when a file is chosen:
$(document).on('change', '.btn-file :file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
});
// Here’s an example to demonstrate the event:
$(document).ready( function() {
    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
        console.log(numFiles);
        console.log(label);
    });
});

file_input_button_bootstrap_3.css

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  background: red;
  cursor: inherit;
  display: block;
}
input[readonly] {
  background-color: white !important;
  cursor: text !important;
}

file_input_button_bootstrap_3.html

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
 
  
<div class="container" style="margin-top: 20px;">
    <div class="row">
        
        <div class="col-lg-6 col-sm-6 col-12">
            <div class="jumbotron">
                <h1>Bootstrap File Input Demo</h1>
            </div>
        </div>
        
        <div class="col-lg-6 col-sm-6 col-12">
            <h4>Standard Button</h4>
            <span class="file-input btn btn-primary btn-file">
                Browse&hellip; <input type="file" multiple>
            </span>
        </div>
        <div class="col-lg-6 col-sm-6 col-12">
            <h4>Block-level Button
            <span class="file-input btn btn-block btn-primary btn-file">
                Browse&hellip; <input type="file" multiple>
            </span>
        </div>
        
        <div class="col-lg-6 col-sm-6 col-12">
            <h4>Button Groups</h4>
            <div class="btn-group">
                <a href="#" class="btn btn-default">Action 1</a>
                <a href="#" class="btn btn-default">Action 2</a>
                <span class="btn btn-primary btn-file">
                    Browse&hellip; <input type="file" multiple>
                </span>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-12">
            <h4>Input Groups</h4>
            <div class="input-group">
                <span class="input-group-btn">
                    <span class="btn btn-primary btn-file">
                        Browse&hellip; <input type="file" multiple>
                    </span>
                </span>
                <input type="text" class="form-control" readonly>
            </div>
            <span class="help-block">
                Try selecting one or more files and watch the feedback
            </span>
        </div>
        
    </div>
</div>

file_input_button_bootstrap_3.js

$(document).on('change', '.btn-file :file', function() {
  var input = $(this),
      numFiles = input.get(0).files ? input.get(0).files.length : 1,
      label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
  input.trigger('fileselect', [numFiles, label]);
});

$(document).ready( function() {
    $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
        
        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;
        
        if( input.length ) {
            input.val(log);
        } else {
            if( log ) alert(log);
        }
        
    });
});