Bootstrap custom Choose File upload

Bootstrap custom Choose File upload

by Korah Babu Varghese

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="panel-body">
  <div class="input-group">
    <input id="uploadFile" class="form-control" placeholder="Choose File" disabled="disabled">
    <div class="input-group-btn">
      <div class="fileUpload btn btn-success">
        <span><i class="glyphicon glyphicon-upload"></i> Upload</span>
        <input id="uploadBtn" type="file" class="upload" />
      </div>
    </div>
  </div>
</div>

CSS

.fileUpload {
  width:100%;
    position: relative;
    overflow: hidden;
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:50%;
    margin:auto;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    margin:auto;
    width:50%;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

JavaScript

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value.substring(12);
};