Pfthb

In this message to the HTML 5 mailing list Ian Hickson says:

HTML5 now has to upload many files at
once. Browsers could allow users to
pick multiple files at once, including
across multiple directories; that's a
bit out of scope of the spec.

(Also see the original feature proposal.)
So it's safe to assume he considers uploading folders using drag-and-drop also out of scope. Apparently it's up to the browser to serve individual files.

Uploading folders would also have some other difficulties, as described by Lars Gunther:

This […] proposal must have two
checks (if it is doable at all):

1. Max size, to stop someone from uploading a full directory of several
   hundred uncompressed raw images...




2. Filtering even if the accept attribute is omitted. Mac OS metadata
   and Windows thumbnails, etc should be
   omitted. All hidden files and
   directories should default to be
   excluded.

Now you can upload directories with both drag and drop and input.

<input type='file' webkitdirectory >

and for drag and drop(For webkit browsers).

Handling drag and drop folders.

<div id="dropzone"></div>
<script>
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
 
 
;
</script>

Resources:

http://updates.html5rocks.com/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available

Firefox now supports folder upload, as of November 15, 2016, in v50.0: https://developer.mozilla.org/en-US/Firefox/Releases/50#Files_and_directories

You can drag and drop folders into Firefox or you can browse and select a local folder to upload. It also supports folders nested in subfolders.

That means you can now use either Chrome, Firefox, Edge or Opera to upload folders. You can't use Safari or Internet Explorer at present.

This function will give you a promise for array of all dropped files, like <input type="file"/>.files:

function getFilesWebkitDataTransferItems(dataTransferItems) 
 function traverseFileTreePromise(item, path='') 
 return new Promise( resolve => 
 if (item.isFile) 
 item.file(file => 
 file.filepath = path + file.name //save full path
 files.push(file)
 resolve(file)
 )
 else if (item.isDirectory) 
 let dirReader = item.createReader()
 dirReader.readEntries(entries => 
 let entriesPromises = 
 for (let entr of entries)
 entriesPromises.push(traverseFileTreePromise(entr, path + item.name + "/"))
 resolve(Promise.all(entriesPromises))
 )
 
 )
 

 let files = 
 return new Promise((resolve, reject) => 
 let entriesPromises = 
 for (let it of dataTransferItems)
 entriesPromises.push(traverseFileTreePromise(it.webkitGetAsEntry()))
 Promise.all(entriesPromises)
 .then(entries => 
 //console.log(entries)
 resolve(files)
 )
 )

Usage:

dropArea.addEventListener("drop", function(event) 
 event.preventDefault();

 var items = event.dataTransfer.items;
 getFilesFromWebkitDataTransferItems(items)
 .then(files => 
 ...
 )
, false);

npm package

https://www.npmjs.com/package/datatransfer-files-promise

usage example:
https://github.com/grabantot/datatransfer-files-promise/blob/master/index.html

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 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++) 
 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/anon/pen/gBJrOP

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, but as the documentation notes: it is a non-standard/experimental feature, not on a standards track, and can't be expected to work for all browsers.

Related:

• 
  johnozbay comments that on Chrome, readEntries will return at most 100 entries for a directory (verified as 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.

The HTML5 spec does NOT say that when selecting a folder for upload, the browser should upload all contained files recursively.

Actually, in Chrome/Chromium, you can upload a folder, but when you do it, it just uploads a meaningless 4KB file, which represents the directory. Some servers-side applications like Alfresco can detect this, and warn the user that folders can not be uploaded:

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

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

Only Chrome supports this feature. It has failed to have any traction and is likely to be removed.

Ref : https://developer.mozilla.org/en/docs/Web/API/DirectoryReader#readEntries