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

  const reader = new FileReader();
  reader.addEventListener("loadstart", start);
  reader.addEventListener("progress", status);
  reader.addEventListener("loadend", function() {
    show(myfile);
  });
  reader.readAsArrayBuffer(myfile);
}
function start(event) {
  databox.innerHTML = '<progress value="0" max="100">0%</progress>';
}
function status(event) {
  const per = Math.floor(event.loaded / event.total * 100);
  databox.innerHTML = '<progress value="' + per + '" max="100">' + per + '%</progress>';
}
function show(myfile) {
  databox.innerHTML = "Name: " + myfile.name + "<br>";
  databox.innerHTML += "Type: " + myfile.type + "<br>";
  databox.innerHTML += "Size: " + myfile.size + " bytes<br>";
}
window.addEventListener("DOMContentLoaded", initiate);