Js input file upload button style

//Input file button style
//HTML
<div class="file-upload">
  <div class="file-select">
    <div class="file-select-button" id="fileName">Choose File</div>
    <div class="file-select-name" id="noFile">No file chosen...</div>
    <input type="file" name="chooseFile" id="chooseFile">
  </div>
</div>
//CSS

.ic-file-upload input, label {
  display: block;
}

.file-upload .file-select{
    display:block;
    color: #34495e;
    cursor:pointer;
    height:40px;
    line-height:40px;
    text-align:left;
    background:#FFFFFF;
    /* overflow:hidden; */
    position:relative;
}
 .file-upload .file-select .file-select-button{
    background:#821789;
    padding:0 10px;
    display:inline-block;
    height:40px;
    line-height:40px;
    color: #fff;
}
 .file-upload .file-select .file-select-name{
    line-height:40px;
    display:inline-block;
    padding:0 10px;
}
 .file-upload .file-select:hover{
    border-color:#821789;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
}
 .file-upload .file-select:hover .file-select-button{
    background:#821789;
    color:#FFFFFF;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
}
 .file-upload.active .file-select{
    border-color:#3fa46a;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 .file-upload.active .file-select .file-select-button{
    background:#3fa46a;
    color:#FFFFFF;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
}
 .file-upload .file-select input[type=file]{
    z-index:100;
    cursor:pointer;
    position:absolute;
    height:100%;
    width:100%;
    top:0;
    left:0;
    opacity:0;
    filter:alpha(opacity=0);
}
 .file-upload .file-select.file-select-disabled{
    opacity:0.65;
}
 .file-upload .file-select.file-select-disabled:hover{
    cursor:default;
    display:block;
    border: 2px solid #821789;
    color: #34495e;
    cursor:pointer;
    height:40px;
    line-height:40px;
    margin-top:5px;
    text-align:left;
    background:#FFFFFF;
    overflow:hidden;
    position:relative;
}
 .file-upload .file-select.file-select-disabled:hover .file-select-button{
    background:#821789;
    color:#666666;
    padding:0 10px;
    display:inline-block;
    height:40px;
    line-height:40px;
}
 .file-upload .file-select.file-select-disabled:hover .file-select-name{
    line-height:40px;
    display:inline-block;
    padding:0 10px;
}

//JS
$('#chooseFile').bind('change', function () {
  var filename = $("#chooseFile").val();
  if (/^\s*$/.test(filename)) {
    $(".file-upload").removeClass('active');
    $("#noFile").text("No file chosen...");
  }
  else {
    $(".file-upload").addClass('active');
    $("#noFile").text(filename.replace("C:\\fakepath\\", ""));
  }
});