Preview uploaded image with input file using JS

by Pranab Dey

HTML

<span></span>
<div class="allElement"></div>
<img src="" alt="">

JavaScript

var select1 = document.createElement("input");
select1.setAttribute("type", "file");
select1.setAttribute("multiple", "multiple");

var link = document.createElement("a");
link.setAttribute("href", "");
link.innerText = "Select File";

function imagePrev() {
  var file = new FileReader();
  if (select1.files[0]) {
    file.onload = function() {
      document.querySelector("img").src = this.result;
    }
    file.readAsDataURL(select1.files[0]);
  }
}

link.onclick = function() {
  select1.click();
  document.querySelector("span").innerHTML = `${select1.files[0].name} | ${((select1.files[0].size) / 1024).toFixed(2)}kb | ${select1.files[0].type}`;
  imagePrev();
  return false;
}

document.querySelector(".allElement").appendChild(link);