Example

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry -->

<p>Drag files and/or directories to the box below!</p>

<div id="dropzone">
  <div id="boxtitle">
    Drop Files Here
  </div>
</div>

CSS

#dropzone {
  text-align: center;
  width: 300px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 4px dashed red;
  border-radius: 10px;
}

#boxtitle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: black;
  font: bold 2em "Arial", sans-serif;
  width: 300px;
  height: 100px;
}

body {
  font: 14px "Arial", sans-serif;
}

JavaScript

let dropzone = document.getElementById("dropzone");

function scanFiles(item, entry) {
  if (entry.isFile) {
    fileReadSuccess(item.getAsFile(), entry.fullPath);
  } else {
    readDirectory(entry.createReader());
  }
}
function readDirectory(reader) {
  reader.readEntries(function (entries) {
    if (entries.length) {
      entries.forEach(function(entry) {
        if (entry.isFile) {
          var fullPath = entry.fullPath;
          entry.file(function (file) {
            fileReadSuccess(file, fullPath);
          }, readError);
        } else if (entry.isDirectory) {
          readDirectory(entry.createReader());
        }
      });
      readDirectory(reader);
    }
  }, readError);
}
function fileReadSuccess(file, fullPath) {
  console.log(file);
  console.log(fullPath);
  console.log(file.size);
}
function readError(fileError) {
    throw fileError;
}
dropzone.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);
dropzone.addEventListener("drop", function(event) {
  let items = event.dataTransfer.items;

  event.preventDefault();
 
  for (let i=0; i<items.length; i++) {
    let item = items[i];
    let entry = items[i].webkitGetAsEntry();
    
    if (entry) {
        scanFiles(item, entry);
    }
  }
}, false);