Folderupload

by makilo123

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>

<h2>Directory tree:</h2>

<ul id="listing">
</ul>

CSS

#dropzone {
  text-align: center;
  width: 400px;
  height: 200px;
  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: 400px;
  height: 200px;
}

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

JavaScript

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

class MyFile {
  constructor(file, path) {
    this.file = file;
    this.path = path;
  }
}
let files = [];

function scanFiles(item, container) {
  let elem = document.createElement("li");
  elem.innerHTML = item.name;
  container.appendChild(elem);
 
 if (item.isDirectory) {
    let jsFileObject
    let directoryReader = item.createReader();
    let directoryContainer = document.createElement("ul");
    container.appendChild(directoryContainer);
    
    directoryReader.readEntries(function(entries) {
        entries.forEach(function(entry) {
        	console.log("entry", entry)
          if(entry.isFile){
          console.log("file")
          	entry.file(function (file){
            	jsFileObject = file
              var path = entry.fullPath
              console.log("path", path)
              console.log("FileObject", jsFileObject)
              files.push(new MyFile(file, path));
              console.log(files)
            })
          }
          scanFiles(entry, directoryContainer);
      });
    });
  }
}
dropzone.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);
dropzone.addEventListener("drop", function(event) {
  let items = event.dataTransfer.items;

  event.preventDefault();
  listing.innerHTML = "";
 
  for (let i=0; i<items.length; i++) {
    let item = items[i].webkitGetAsEntry();
    
    if (item) {
    		console.log(item)
        scanFiles(item, listing);
    }
  }
  
  console.log("her");
  for (let i = 0; i < files.length; i++)
  {
  	console.log("path: " + files[i].path);
  }
}, false);