Edit on
<div class="wrapper">
	<h2>Selected file <br /><strong>max 20,000 bytes</strong></h2>
	<form>
		<input type="file" id="resume" style="display:none">
	</form>
	<div class="bx-file">
		<a id="ancla" href="javascript:void(0);">Search file</a>
		<span class="text-faq">No selected file</span>
		<span class="text_notice_red">max limite 20000 bytes</span>
		<span class="text_notice_green">OK</span>
	</div>
</div>
<span class="mysite">Junio Marques | front-end developer Ecommerce - my site: <a  href="http://juniomarques.com" target="black">juniomarques.com</a></span>
* {
	box-sizing: border-box;
	font-family: arial;
}
.wrapper {
 	margin: 60px auto;
 	width: 600px;
	height: auto;
	padding: 40px;
	border: 1px solid #cccccc;
	transition: all 0.3s cubic-bezier(0.63, -0.33, 1, 0.16);
	&:hover {
		box-shadow: 0 4px 40px -10px #000000;
		transform: translateY(-8px);
	}
	h2 {
		font-size: 30px;
		font-weight: 900;
		text-transform: uppercase;
		letter-spacing: 4px;
		color: #909090;
		margin: 0 0 20px 0;
		line-height: 22px;
		display:inline-block;
		strong {
			font-size: 16px;
		}
	}
}
.bx-file {
 	position: relative;
	display: inline-block;
	a {
		font-size: 16px;
		font-weight: 900;
		text-transform: uppercase;
		background:#ccc;
		padding:5px 10px;
		text-decoration:none;
		color:#4F4F4F;
		margin-right: 10px;
	}
	.text-faq {
		display: inline-block;
		margin-top: 40px;
		padding: 4px 8px;
		transition: background-color 0.3s cubic-bezier(0, 0.7, 0, 1.31);
	}
	.text-noticeRed {
		background-color: red;
		color: #ffffff;
	}
	.text-noticeGreen {
		background-color: #70E770;
		color: #ffffff;
	}
	.text_notice_green {
		position: absolute;
		background: #ffffff;
		box-shadow: 0 -5px 6px #525151;
		border-radius: 5px;
		bottom: 30px;
		right:0;
		width:0;
		height: 0;
		overflow:hidden;
		transition: all 0.3s cubic-bezier(0, 0.7, 0, 1.31);
	}
	.text_notice_red {
		@extend .text_notice_green;
	}
	.text_notice_visible {
		width: auto;
		padding: 10px;
		height: auto;
	}
}
.mysite {
	display:block;
	text-align:right;
	text-align:center;
	display:block;
}
View Compiled
var Filemanager = function() {
	// MY OBJ
	var myFile = {};
	// variables 
	var 	input = document.getElementById('resume'),
	    	ancla = document.getElementById('ancla');
	// forzar click en input file
	ancla.addEventListener('click', resumeClick, false);
	function resumeClick() {
		if(input){
			input.click();
		}
	}
	// Instancia MY OBJ
	myFile.varChange = function() {
		/*
		* DECLARACIÓN VARIABLES
		*/
		var	bxFile    = document.querySelectorAll('.bx-file')[0],
			textFaq   = bxFile.getElementsByClassName('text-faq')[0],
			textRed   = bxFile.getElementsByClassName('text_notice_red')[0],
			textGreen = bxFile.getElementsByClassName('text_notice_green')[0],
			tagSpan   = bxFile.getElementsByTagName('span')[0];
		/* 
		* LLamar noticeSize() 
		* cuando cambie el valor del input file
		* y pasar datos del file a funcción
		*/
		input.onchange = function() {
				var	sizeFile   = input.files[0].size,
					nameFile   = input.value,
					nameReduce = nameFile.split("fakepath"),
					namePrint  = nameReduce[1];
			noticeSize(sizeFile, namePrint);
		}
		// function p/imprimir msg c/valores del file
		function noticeSize(sizeFile, namePrint) {
			if(sizeFile>20000) {
				textRed.className="text_notice_red text_notice_visible";
				textFaq.className='text-faq text-noticeRed';
				setTimeout(function(){
					textRed.className="text_notice_red";
				}, 3000);
			}else { 
				textFaq.className='text-faq text-noticeGreen'; 
				textGreen.className="text_notice_green text_notice_visible";
				setTimeout(function(){
					textGreen.className="text_notice_green";
				}, 3000);
			}
			tagSpan.innerHTML = namePrint + ' - size ' + sizeFile + ' bytes';
		}
	}
	return myFile;
}
var myFile = Filemanager();
myFile.varChange();









		
	


	




Rerun