Uploading Folders (using Filesystem Api)

I'm trying to upload folders using the FileSystem API. dropzone.ondrop = function(e) { e.preventDefault(); let items=e.dataTransfer.items;

Solution 1:

.file() function is asynchronous. You can use Promise constructor and Promise.all() to await all calls to .file(), see also How to upload and list directories at firefox and chrome/chromium using change and drop events

HTML

<inputtype="file" webkitdirectory>

JavaScript

var dropzone = document.querySelector("input[type=file]");

dropzone.ondrop = function(e) {
  e.preventDefault();
  let items = e.dataTransfer.items;
  let formdata = newFormData();

  functionscanFiles(item, index) {
    returnnewPromise(function(resolve) {
      if (item.isFile) {
        console.log("Typecasting...", item);

        item.file(function(file) {
          console.log(file, "here");
          formdata.append('file-' + index, file);
          resolve();
        });
      } elseif (item.isDirectory) {
        console.log("Directory...")
        let directoryReader = item.createReader();

        directoryReader.readEntries(function(entries) {
          Promise.all(entries.map(scanFiles)).then(resolve);
        });
      }
    })
  }

  var p = Promise.all(Array.from(items, item =>scanFiles(item.webkitGetAsEntry())));
  p.then(function() {
    // do stuff with `formdata` herefor (let prop of formdata) {
      console.log(prop[0], prop[1])
    }
    /*
      var xhr=new XMLHttpRequest();
      formdata.append('address','');
      xhr.open('post','uploadFolder/');
      xhr.send(formdata);
    */
  })

}

jsfiddle https://jsfiddle.net/t03bvbzu/