Drag-and-drop files in div

Drag files from desktop into div and show files info.

HTML

<div id="drop_area" ondrop="drop(event)" ondragover="event.preventDefault()">drop your files here</div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

#drop_area {
  width: 100%;
  height: 50%;
  border: 3px dashed #aaaaaa;
  border-radius: 10px;
  text-align: center;
  white-space: pre;
  overflow: auto;
}

JavaScript

function drop(event) {
  event.stopPropagation();
  event.preventDefault();
  
  drop_area.style.textAlign = 'left';
	
  // get the file as an fileEntry (aka file handle)
  const fileEntry = event.dataTransfer.items[0].webkitGetAsEntry()
  let lastModificationTime = new Date(0)
  
  async function read (file) {
    // use the new async read method on blobs.
    drop_area.innerText = await file.text()
  }
  
  function compare (meta) {
    if (meta.modificationTime > lastModificationTime) {
      lastModificationTime = meta.modificationTime
      fileEntry.file(read)
    }
  }
  
  setInterval(fileEntry.getMetadata.bind(fileEntry, compare), 1000)
}