image upload preview

change image source on image upload select

by firegroove

HTML

<label for="file"><img id="img" src="http://placehold.it/75X75"/></label>
<input type="file" id="file" />

CSS

#file {
  display: none;
}

#img {
  height: 100px;
  width: 100px;
}

JavaScript

const reader = new FileReader();
const fileInput = document.getElementById("file");
const img = document.getElementById("img");
let file;

reader.onload = e => {
  img.src = e.target.result;
}

fileInput.addEventListener('change', e => {
  const f = e.target.files[0];
  file = f;
  reader.readAsDataURL(f);
})