Cacher is the code snippet organizer for pro developers

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
	var label	 = input.nextElementSibling,
		labelVal = label.innerHTML;

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

		if( fileName )
			label.querySelector( 'span' ).innerHTML = fileName;
		else
			label.innerHTML = labelVal;
	});
});

@import url(https://fonts.googleapis.com/css?family=Roboto);

$orange: #FF5722;
$shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.20);
$shadow-2:0 3px 10px 0 rgba(0, 0, 0, 0.25), 0 5px 18px 0 rgba(0, 0, 0, 0.20);

body {
	padding: 100px;
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

.hide {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

label[for="upload"] {
	display: inline-block;
	cursor:pointer;
	padding: 10px 30px;
	background-color: #FF5722;
	color:#ffffff;
	box-shadow: $shadow;
	border-radius:2px;
	transition: all 0.3s;
	
	&:hover {
		box-shadow: $shadow-2;
	}
}

<!-- based on article by Osvaldas Valutis on https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ -->
<input type="file" class="hide inputfile" id="upload" data-multiple-caption="{count} files selected" multiple />
<label for="upload"><span>label</span></label>