Bootstrap file input

by Peter Drinnan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<form class="enhaned">


<div class="input-group">
 <span class="input-group-btn">
  <label class="btn btn-primary">
    <input type="file" name="myfile" multiple="true">
    <button class="js">Choose file</button>
  </label>
 </span>
 <input name="myfile_name" type="text" class="form-control js" placeholder="No file chosen">
</div>




</form>

CSS

.enhanced .input-group-btn > label > input[type="file"] { 
  opacity: 0;
  width: 0.1px;
  height: 0.1px;
	overflow: hidden;
	position: absolute;
  z-index: -1;
  }

.form-control.js, .js { display: none }
.enhanced .js { display: inherit }

JavaScript

$("input[name='myfile']").change(function(e) {

		var fileName = '';

			if( this.files && this.files.length > 1 )
				fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
			else if( this.value )
				fileName = this.value.split( '\\' ).pop();

			$('input[name="' + $(this).attr('name')+ '_name').val( fileName );

})