mixedpuppy/sidebar.html

## sidebar.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <script src="sidebar.js"></script>
  </head>
  <body>  <!--body is drop target-->
    <a href="http://mozilla.org">Mozilla</a>
    <div>Drop directory</div>
    <input type="file" webkitdirectory="true" id="btnSelectDir"/>
    <div id="files"></div>
  </body>
</html>

## sidebar.js
function traverseFileTree(item, path) {
  path = path || "";
  if (item.isFile) {
    // Get file
    let parent = document.getElementById("files");
    item.file(function(file) {
      console.log("File:", path + file.name);
      let div = document.createElement("div");
      let text = document.createTextNode(path + file.name);
      div.appendChild(text);
      parent.appendChild(div);
    });
  } else if (item.isDirectory) {
    // Get folder contents
    var dirReader = item.createReader();
    dirReader.readEntries(function(entries) {
      for (var i=0; i<entries.length; i++) {
        traverseFileTree(entries[i], path + item.name + "/");
      }
    });
  } else if (item.webkitRelativePath) {
    let parent = document.getElementById("files");
    console.log("File:", item.webkitRelativePath);
    let div = document.createElement("div");
    let text = document.createTextNode(item.webkitRelativePath);
    div.appendChild(text);
    parent.appendChild(div);
  }
}

function showFiles(e) {
  e.preventDefault();

  var items = e.dataTransfer ? (e.dataTransfer.items || e.dataTransfer.files) : e.target.files;
  for (var i=0; i<items.length; i++) {
    // file input element does not have webkitGetAsEntry but drag/drop does
    var item = items[i].webkitGetAsEntry ? items[i].webkitGetAsEntry() : items[i];
    if (item) {
      traverseFileTree(item);
    }
  }
  return false;
}

window.onload = () => {
  document.getElementById('btnSelectDir').addEventListener('change', showFiles);
  document.body.ondragover = () => { this.className = 'hover'; return false; };
  document.body.ondragend = () => { this.className = ''; return false; };
  document.body.ondrop = showFiles;
};