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

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 with multiple, webkitdirectory attributes set; 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 , 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%;
}

Drop files  folder :