JSFiddle - React, Tailwind, and code Playground

by Hoang Hiếu

HTML

<form id="frmUpload" class="form-horizontal" action="/upload.html" method="POST" enctype="multipart/form-data">
                   </div>
										 <div class="pull-right">
                     <input type="submit" class="btn btn-primary pull-right" name="files" id="btnUpload" value="Upload Now !">
                     <div id="input-click" class="btn btn-info pull-right">Choose</div>					                   
                    <input accept="image/*,MIME_type" type="file" name="file[]" id="inputfile" multiple="" style="width: 0px; height: 0px;">
                    
                    </div>
				</form>

CSS

.control-label{
							width:100px !important;
						}
						.controls{
							margin-left:110px !important;
						}
						.left{
							float:left;
							position:relative;
						}
.btn {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-image: none;
    border: 0;
    padding: 10px;
    font-weight: lighter;
}

.pull-right {
    float: right;
}

.btn-info {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #49afcd;
    background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
    background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
    background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
    background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
    border-color: #2f96b4 #2f96b4 #1f6377;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.btn {
    border-color: #c5c5c5;
    border-color: rgba(0,0,0,0.15) rgba(0,0,0,0.15) rgba(0,0,0,0.25);
}

.btn {
    display: inline-block;
    padding: 5px 14px !important;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: #eee;
    background-image: -moz-linear-gradient(top,#eee,#eee);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#eee),to(#eee));
    background-image: -webkit-linear-gradient(top,#eee,#eee);
    background-image: -o-linear-gradient(top,#eee,#eee);
    background-image: linear-gradient(to bottom,#eee,#eee);
    background-repeat: repeat-x;
    filter:...

JavaScript

$(document).ready(function() {
							$("#btnUpload").attr('disabled','disabled');
							$("#inputfile").change(function (){
								$("#btnUpload").removeAttr('disabled');
								$("#input-click").html('Choose ('+$("#inputfile").get(0).files.length +' files)');
							});							
							$('#inputfile').css({
								width:0,
                        		height:0
							});
							$('#input-click').click(function() {
								$('#inputfile').click();
							});
							 $('#btnUpload').click(function(){
							   $('#frmUpload').submit();
							});    
						});