Select & Drop Files and/or Folders to be parsed

Question

I\'ve used a part from a post here on SO ( I can\'t remember it though ) to parse files and folders on Chrome, but I cannot get it to work on Firefox (and to be honest I hav

Answer 1

Nightly 45+ supports directory upload. See Does Firefox support folder upload?

window.onload = function() {
  document.querySelector("input").onchange = function(e) {

    var uploadFile = function(file, path) {
      // handle file uploading
      console.log(file, path)
    };

    var iterateFilesAndDirs = function(filesAndDirs, path) {
      for (var i = 0; i < filesAndDirs.length; i++) {
        if (typeof filesAndDirs[i].getFilesAndDirectories === "function") {
          var path = filesAndDirs[i].path;

          // this recursion enables deep traversal of directories
          filesAndDirs[i].getFilesAndDirectories().then(function(subFilesAndDirs) {
            // iterate through files and directories in sub-directory
            iterateFilesAndDirs(subFilesAndDirs, path);
          });
        } else {
          uploadFile(filesAndDirs[i], path);
        }
      }
    };
    if ("getFilesAndDirectories" in e.target) {
      e.target.getFilesAndDirectories()
        .then(function(filesAndDirs) {
          iterateFilesAndDirs(filesAndDirs, "/");
        })
    } else {
      // do webkit stuff
    }
  }
}

<input type="file" webkitdirectory allowdirs directory />

plnkr http://plnkr.co/edit/DSUeZiW4JjvxmRrFnqN0?p=preview

Answer 2

What can I change to get it to work on both Chrome and Firefox

Note, firefox does not currently support directory attribute at input type="file" element to read uploaded folders; .webkitGetAsEntry() is not a firefox supported method .

Try using <input type="file"> with multiple, webkitdirectory attributes set; <input type="radio"> for user to select folder or files upload to toggle webkitdirectory attribute at input type="file" element. Can't select files when webkitdirectory is present on <input type="file" /> , Allow chrome to select both/either directory or files .

window.onload = function() {
  var results = document.getElementById("results");
  var dropped = document.getElementById("filesDropped");
  var file = document.getElementById("file");
  var files = document.getElementById("files");
  var folder = document.getElementById("folder");
  document.getElementById("type").onchange = function(e) {
    file[(files.checked ? "remove" : "set") 
         + "Attribute"]("webkitdirectory", true)
  }

  file.onchange = function(e) {
    results.innerHTML = "";
    e.preventDefault();
    e.stopImmediatePropagation();
    var files = e.target.files;
    dropped.innerHTML = files.length;
    for (var i = 0; i < files.length; i++) {
      if (/image/.test(files[i].type)) {
        (function(j) {
          var img = new Image;
          img.onload = function() {
            console.log(files[j]);
            var figure = document.createElement("figure");
            var figcaption = document.createElement("figcaption");
            figcaption.innerHTML = files[j].name;
            figure.appendChild(figcaption);
            figure.appendChild(img);
            results.appendChild(figure);
            URL.revokeObjectURL(url);
          }
          var url = URL.createObjectURL(files[j]);
          img.src = url;
        }(i))
      } else {
        console.log(files[i].type, files[i])
      }
    }
    results.style.width = width;
  }
}

#dropzone {
  padding: 0px;
  margin: 0px;
  width: 400px;
  height: 300px;
  border: 2px dotted green;
}
#dropzone:hover {
  border: 4px dotted blue;
}
#dropzone input {
  width: 400px !important;
  height: 300px !important;
  opacity: 0;
}
#results {
  position: relative;
  display: block;
  width: auto;
  min-height: 50px;
}
#filesDropped:after {
  content: " Files dropped:";
}
figure,
figcaption {
  display: block;
  position: relative;
  width: 100%;
}

<span id="filesDropped"></span>
<div id="results"></div>
<br>
<span id="type">Drop files <input id="files" name="type" type="radio"> folder <input checked id="folder" name="type" type="radio">:</span>
<div id="dropzone">
  <input id="file" type="file" multiple webkitdirectory/>
</div>