File input single & multi

new_gist_file.html

<!-- SINGLE -->
<div class="form-group">
  <input type="file" id="file" class="inputfile">
  <label for="file">
    <span>Add 3D model</span>
  </label>
</div>

<!-- MULTIPLE -->
<div class="form-group">
  <input type="file" id="file" class="inputfile" multiple
  data-multiple-caption="{count} files selected">
  <label for="file">
    <span>Add 3D model</span>
  </label>
</div>

new_gist_file.js

/*
	By Osvaldas Valutis, www.osvaldas.info
	Available for use under the MIT License
*/

'use strict';

;( function( $, window, document, undefined )
{

	var $inputfile = $( '.inputfile' );
	if ( $inputfile.length ) {
		$inputfile.each( function(){
			var $input	 = $( this ),
				$label	 = $input.next( 'label' ),
				labelVal = $label.html();

			$input.on( '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( e.target.value )
					fileName = e.target.value.split( '\\' ).pop();

				if( fileName )
					$label.addClass('active').find( 'span' ).html( fileName );
				else
					$label.removeClass('active').html( labelVal );
			});

			// Firefox bug fix
			$input
			.on( 'focus', function(){ $input.addClass( 'has-focus' ); })
			.on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
		});
	}
})( jQuery, window, document );

new_gist_file.sass

.inputfile
  width: 0.1px
  height: 0.1px
  opacity: 0
  overflow: hidden
  position: absolute
  z-index: -1

  &:focus + label,
  & + label:hover
    +focus-elements

  & + label
    display: inline-block
    @extend .form-control
    font-weight: inherit
    
    &.active
      span
        color: $input-color

    &:before
      float: right
      font-size: 20px
      padding: 0
      @extend .fa
      @extend .fa-paperclip

    *
      pointer-events: none

    span
      display: block
      margin-right: 40px
      color: $input-color-placeholder