Drag-and-drop files in div

Drag files from desktop into div and show files info.

by user2314737

HTML

<div id="drop_area" ondrop="drop(event)" ondragover="event.preventDefault()">drop your files here</div>
<div id="file_list">
</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;
}

JavaScript

function drop(event) {
  event.stopPropagation();
  event.preventDefault();

  var files = event.dataTransfer.files; //It returns a FileList object
  var filesInfo = "<table><thead><tr><th>Name</th><th>Size</th><th>Type</th><th>Modified Date</th></tr></thead>";

  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    filesInfo += "<tr><td>" + file.name + "</td><td>" + file.size + " bytes" + "</td><td>" + file.type + "</td><td>" + file.lastModifiedDate + "</td></tr>";

  }
  filesInfo += "</table>";
  var output = document.getElementById("file_list");

  output.innerHTML = filesInfo;
}