let databox;
function initiate() {
  databox = document.getElementById("databox");
  const myfiles = document.getElementById("myfiles");
  myfiles.addEventListener("change", process);
}
function process(event) {
  const files = event.target.files;
  databox.innerHTML = "";

  const myfile = files[0];
  if (!myfile.type.match(/image.*/i)) {
    alert("Insert an image");
  } else {
    databox.innerHTML += "Name: " + myfile.name + "<br>";
    databox.innerHTML += "Size: " + myfile.size + " bytes<br>";
    const reader = new FileReader();
    reader.addEventListener("load", show);
    reader.readAsDataURL(myfile);
  }
}
function show(event) {
  const result = event.target.result;
  databox.innerHTML += '<img src="' + result + '">';
}
window.addEventListener("DOMContentLoaded", initiate);