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

【メモ】プレビュー画像が見えるイメージアップローダー脱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){ 
  var target = document.querySelector('.imageUploader__button button'); 
  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); 
};