Change label on File Attach

by Faisal Khan Janjua

HTML

<label for="attachFile" class="outerLabel">Outer Label</label>
<div class="uploadActions">
<input type="file" id="attachFile" multiple />
  <label for="attachFile" class="fieldView">Click here to attach file</label>
  <label for="attachFile" class="btn btn-attach">Attach</label>
</div>

SCSS

.uploadActions {
  margin: 0;
  width: 100%;
  margin-top: 6px;
  position: relative;
  display: inline-block;
  & input[type="file"] {
    opacity: 0;
    z-index: -1;
    position: absolute;
  }
  & label:not(.btn) {
    margin: 0;
    font-weight: 400;
    width: calc(100% - 136px) !important;
    width: -webkit-calc(100% - 136px) !important;
  }
  & .btn-attach {
    margin: 0;
    padding: 8px 30px;
  }
  & .fieldView {
    float: left;
    padding: 8px;
    cursor: pointer;
    text-align: left;
    background: #fff;
    border-radius: 4px;
    color: #828287;
    width: calc(100% - 78px);
    width: -webkit-calc(100% - 78px);
    border: 1px solid rgba(224,225,229,0.6);
  }
  & .btn {
    float: right;
    border-radius: 4px;
    border: 1px solid #ddd;
  }
}

JavaScript

$(document).on('change', 'input[type="file"]', function(e){
	var thisID = $(this).attr('id');
  var fileName = '';
  if(e.target.files.length == 0) { fileName = 'Click here to attach file'; }
  else if(e.target.files.length == 1) { fileName = e.target.files[0].name; }
  else { fileName = e.target.files.length + ' files selected' }
  $('.uploadActions label[for='+thisID+'].fieldView').text(fileName);
});