How to read files from folder

Question

Found this article which showing how to distinguish file upload from directory How to handle dropped folders but they not explain how I can handle the directory upload. Having difficulties to find any example. Anyone know how to get File instance of each file in directory?

Copied from that article:

<div id=”dropzone”></div>


var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      ... // do whatever you want
    } else if (entry.isDirectory) {
      ... // do whatever you want
    }
  }
};

Answer 1

Use DirectoryReader directoryEntry.createReader() , readEntries() for folders or , FileEntry file() for single or multiple file drops.

html

<div id="dropzone" 
     ondragenter="event.stopPropagation(); event.preventDefault();" 
     ondragover="event.stopPropagation(); event.preventDefault();" 
     ondrop="event.stopPropagation(); event.preventDefault(); handleDrop(event);">
    Drop files
</div>

javascript

function handleFiles(file) {
  console.log(file);
  // do stuff with `File` having `type` including `image`
  if (/image/.test(file.type)) {
    var img = new Image;
    img.onload = function() {
      var figure = document.createElement("figure");
      var figcaption = document.createElement("figcaption");
      figcaption.innerHTML = file.name;
      figure.appendChild(figcaption);
      figure.appendChild(this);
      document.body.appendChild(figure);
      URL.revokeObjectURL(url);
    }
    var url = URL.createObjectURL(file);
    img.src = url;
  } else {
    console.log(file.type)
  }
}

function handleDrop(event) {
  var dt = event.dataTransfer;
  var files = dt.files;
  var length = event.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = dt.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      // do whatever you want
      console.log("isFile", entry.isFile);
      entry.file(handleFiles);
    } else if (entry.isDirectory) {
      // do whatever you want
      console.log("isDirectory", entry.isDirectory);
      var reader = entry.createReader();
      reader.readEntries(function(entries) {
        entries.forEach(function(dir, key) {
          dir.file(handleFiles);
        })
      })
    }
  }
}

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

Answer 2

After you drag some file from your disk. This event.dataTransfer.file is your fileList object. Your could create a formData then Add files from fileList to formData one by one.

In the end you could submit formData to server with Ajax