Does HTML5 allow drag-drop upload of folders or a folder tree?

Unfortunately none of the existing answers are completely correct because readEntries will not necessarily return ALL the (file or directory) entries for a given directory. This is part of the API specification (see Documentation section below).

To actually get all the files, we'll need to call readEntries repeatedly (for each directory we encounter) until it returns an empty array. If we don't, we will miss some files/sub-directories in a directory e.g. in Chrome, readEntries will only return at most 100 entries at a time.

Using Promises (await/ async) to more clearly demonstrate the correct usage of readEntries (since it's asynchronous), and breadth-first search (BFS) to traverse the directory structure:

// Drop handler function to get all files
async function getAllFileEntries(dataTransferItemList) {
  let fileEntries = [];
  // Use BFS to traverse entire directory/file structure
  let queue = [];
  // Unfortunately dataTransferItemList is not iterable i.e. no forEach
  for (let i = 0; i < dataTransferItemList.length; i++) {
    // Note webkitGetAsEntry a non-standard feature and may change
    // Usage is necessary for handling directories
    queue.push(dataTransferItemList[i].webkitGetAsEntry());
  }
  while (queue.length > 0) {
    let entry = queue.shift();
    if (entry.isFile) {
      fileEntries.push(entry);
    } else if (entry.isDirectory) {
      queue.push(...await readAllDirectoryEntries(entry.createReader()));
    }
  }
  return fileEntries;
}

// Get all the entries (files or sub-directories) in a directory 
// by calling readEntries until it returns empty array
async function readAllDirectoryEntries(directoryReader) {
  let entries = [];
  let readEntries = await readEntriesPromise(directoryReader);
  while (readEntries.length > 0) {
    entries.push(...readEntries);
    readEntries = await readEntriesPromise(directoryReader);
  }
  return entries;
}

// Wrap readEntries in a promise to make working with readEntries easier
// readEntries will return only some of the entries in a directory
// e.g. Chrome returns at most 100 entries at a time
async function readEntriesPromise(directoryReader) {
  try {
    return await new Promise((resolve, reject) => {
      directoryReader.readEntries(resolve, reject);
    });
  } catch (err) {
    console.log(err);
  }
}

Complete working example on Codepen: https://codepen.io/pen/QWmvxwV

FWIW I only picked this up because I wasn't getting back all the files I expected in a directory containing 40,000 files (many directories containing well over 100 files/sub-directories) when using the accepted answer.

Documentation:

This behaviour is documented in FileSystemDirectoryReader. Excerpt with emphasis added:

readEntries()
Returns a an array containing some number of the directory's entries. Each item in the array is an object based on FileSystemEntry—typically either FileSystemFileEntry or FileSystemDirectoryEntry.

But to be fair, the MDN documentation could make this clearer in other sections. The readEntries() documentation simply notes:

readEntries() method retrieves the directory entries within the directory being read and delivers them in an array to the provided callback function

And the only mention/hint that multiple calls are needed is in the description of successCallback parameter:

If there are no files left, or you've already called readEntries() on this FileSystemDirectoryReader, the array is empty.

Arguably the API could be more intuitive as well.

It's also worth noting that DataTransferItem.webkitGetAsEntry() is a non-standard feature and may change e.g. renamed getAsEntry(). Its usage is necessary to handle uploading files nested within directories.

Related:

• johnozbay comments that on Chrome, readEntries will return at most 100 entries for a directory (verified as of Chrome 64).
• Xan explains the correct usage of readEntries quite well in this answer (albeit without code).
• Pablo Barría Urenda's answer correctly calls readEntries in a asynchronous manner without BFS. He also notes that Firefox returns all the entries in a directory (unlike Chrome) but we can't rely on this given the specification.

Here's a complete example of how to use the file and directory entries API:

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

function scanAndLogFiles(item, container) {
  var elem = document.createElement("li");
  elem.innerHTML = item.name;
  container.appendChild(elem);

  if (item.isDirectory) {
    var directoryReader = item.createReader();
    var directoryContainer = document.createElement("ul");
    container.appendChild(directoryContainer);

    directoryReader.readEntries(function(entries) {
      entries.forEach(function(entry) {
        scanAndLogFiles(entry, directoryContainer);
      });
    });
  }
}

dropzone.addEventListener(
  "dragover",
  function(event) {
    event.preventDefault();
  },
  false
);

dropzone.addEventListener(
  "drop",
  function(event) {
    var items = event.dataTransfer.items;

    event.preventDefault();
    listing.innerHTML = "";

    for (var i = 0; i < items.length; i++) {
      var item = items[i].webkitGetAsEntry();

      if (item) {
        scanAndLogFiles(item, listing);
      }
    }
  },
  false
);

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

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

<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>

webkitGetAsEntry is supported by Chrome 13+, Firefox 50+ and Edge.

Source: https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry

Recently stumbled upon the need to implement this in two of my projects so I created a bunch of utility functions to help with this.

One creates a data-structure representing all the folders, files and relationship between them, like so

{
  folders: [
    {
      name: string,
      folders: Array,
      files: Array
    },
    /* ... */
  ],
  files: Array
}

While the other just returns an Array of all the files (in all folders and sub-folders).

Here's the link to the package: https://www.npmjs.com/package/file-system-utils

I had been happy copy/pasting @grabantot 's solution until I met the 100 file limit issue.

@xlm 's solution overcomes the 100-file-limit, and it returns an array of FileEntry objects.

However in my project I need to extract the file paths from fileEntry objects.

This works if you have access to the ChromeFileSystem api:

const getAllPaths = async (dataTransferItems) =>{

    async function getAllFileEntries(dataTransferItemList) {
        let fileEntries = [];
        // Use BFS to traverse entire directory/file structure
        let queue = [];
       
        for (let i = 0; i < dataTransferItemList.length; i++) {

          queue.push(dataTransferItemList[i].webkitGetAsEntry());

        }
        while (queue.length > 0) {
          let entry = queue.shift();
          if (entry.isFile) {
            fileEntries.push(entry);
          } else if (entry.isDirectory) {
            queue.push(...await readAllDirectoryEntries(entry.createReader()));
          }
        }
        return fileEntries;
      }
      
      // Get all the entries (files or sub-directories) in a directory 
      // by calling readEntries until it returns empty array
      async function readAllDirectoryEntries(directoryReader) {
        let entries = [];
        let readEntries = await readEntriesPromise(directoryReader);
        while (readEntries.length > 0) {
          entries.push(...readEntries);
          readEntries = await readEntriesPromise(directoryReader);
        }
        return entries;
      }
      
      // Wrap readEntries in a promise to make working with readEntries easier
      // readEntries will return only some of the entries in a directory
      // e.g. Chrome returns at most 100 entries at a time
      async function readEntriesPromise(directoryReader) {
        try {
          return await new Promise((resolve, reject) => {
            directoryReader.readEntries(resolve, reject);
          });
        } catch (err) {
          console.log(err);
        }
      }


     const getDisplayPath = (entry)=>{
        return new Promise((resolve, reject) =>{
            chrome.fileSystem.getDisplayPath(entry, (path)=>{
                if(chrome.runtime.lastError) {
                    reject(chrome.runtime.lastError)
                }else {
                    resolve(path);
                }
            })
        })
    }


    
    const fileEnties = await getAllFileEntries(dataTransferItems);

    const files = await Promise.all(fileEnties.map(async(x)=>{
        return (await getDisplayPath(x))
    }))

    return files;

}