Drag and Drop

<div id="drop" style="width:200px;height:100px;border:2px dashed #999">
  Drop files here
</div>

<script>
  const drop = document.getElementById("drop");

  drop.addEventListener("dragover", e => {
    e.preventDefault();            // allow drop
    drop.classList.add("over");
  });

  drop.addEventListener("dragleave", () => {
    drop.classList.remove("over");
  });

  drop.addEventListener("drop", e => {
    e.preventDefault();
    drop.classList.remove("over");
    const files = e.dataTransfer.files;
    for (const file of files) {
      console.log(file.name, file.size, file.type);
    }
  });
</script>