JSFiddle - React, Tailwind, and code Playground

HTML

<form id="imageUploadForm" method="post" action="/image/upload" enctype="multipart/form-data">
    <label id="imageUploadLabel" for="imageUpload" class="button">Upload Picture</label>
    <input id="imageUpload" class="show" type="file" accept="image/*" capture="camera" name="file">
    <br/>
    <label id="imageUploadLabel2" for="imageUpload2" class="button">Upload Picture 2</label>
    <input id="imageUpload2" class="hidden" type="file" accept="image/*" capture="camera" name="file">

</form>

CSS

body{
    padding:10px;        
    background-color:#3D668F
}
input.show {
    position: fixed;
    left: 1000%;
}

input.hidden {
    display: none;
}
.button {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    width:160px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    margin-bottom:10px;
}.button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.button:active {
    position:relative;
    top:1px;
}
.file-selected:after{
    content: ' ✔'
}
.button.uploading{
    height:0;
    overflow:hidden;
    background-image: url('http://imageshack.us/a/img844/3808/180d.gif');
    background-repeat: no-repeat;
    background-position: center center;
    padding:27px 24px 0
      
}

JavaScript

if($.browser.mozilla) {
  $(document).on('click', 'label', function(e) {
    if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
      $(this.control).click();
    }
  });
}
var $input = $('#imageUpload'),
$label = $('#imageUploadLabel');
$input.change(function(){
    if($input.val().length > 0){
        $label.addClass('file-selected');
    }else{
        $label.removeClass('file-selected');
    }
});
var $input2 = $('#imageUpload2'),
$label2 = $('#imageUploadLabel2');
$input2.change(function(){
    if($input2.val().length > 0){
        $label2.addClass('uploading');
    }else{
        $label2.removeClass('uploading');
    }
});