【メモ】プレビュー画像が見えるイメージアップローダー脱Jquery版

.imageUploader
  .imageUploader__button
    %button{onClick: "buttonClick('hoge')"} 選択
    %input{type: 'file', onChange: 'imageUploader(event)', id: 'hoge'}
  .imageUploader__preview

.imageUploader{
  &__button{
    button{
      width: 100px;
      background-color: #CCC;
      text-align: center;
      border: 1px solid #333;
      -webkit-appearance: none;
    }
    input[type='file']{
      display: none;
    }
  }
  &__preview{
    width: 400px;
    height: 300px;
    img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

function buttonClick(inputID){
  document.getElementById(inputID).click();
};
function imageUploader(e){
  var imageFile = e.target.files[0];
  var reader = new FileReader();
  var imageScreen = document.querySelector('.imageUploader .imageUploader__preview');
  var imageTag = document.querySelector('.imageUploader__preview img');
  if(imageTag != null){
    imageScreen.removeChild(imageTag);
  }
  reader.onload = function(){
    var img = document.createElement('img');
    img.setAttribute('src', reader.result);
    imageScreen.appendChild(img);
  };
  reader.readAsDataURL(imageFile);
};