Unfortunately, none of the existing answers is completely correct, because readEntries will not necessarily return ALL records (file or directory) for this directory.
As noted in a johnozbay comment , in Chrome, readEntries will return no more than 100 entries for a directory. Thus, in order to actually get all the files, we need readEntries to call readEntries (for the current directory) until it returns an empty array.
Xan also explains this pretty well in this answer (albeit without code).
readEntries is asynchronous, so use await and async to make things clearer:
// Drop handler function async function getAllEntries(dataTransferItemList) { let entries = []; // Use BFS to traverse/get all entries let queue = []; // Unfortunately dataTransferItemList is not iterable ie no forEach for (let i = 0; i < dataTransferItemList.length; i++) { queue.push(dataTransferItemList[i].webkitGetAsEntry()); } // BFS traversal while (queue.length > 0) { let entry = queue.shift(); if (entry.isFile) { entries.push(entry); } else if (entry.isDirectory) { let reader = entry.createReader(); queue.push(...await readAll(reader)); } } return entries; } // Get all the entries in a directory async function readAll(directoryReader) { let entries = []; await new Promise((resolve, reject) => { directoryReader.readEntries(resolve, reject); }).then(async es => { if (es.length > 0) { entries.push(...es); // Recursively call to add all the entries from the given directory entries.push(...await readAll(directoryReader)); } // No more entries in directory/nothing to do }).catch(err => { // Extremely long file paths can cause errors console.log(err); }) return entries; }
Full working example on Codepen: https://codepen.io/anon/pen/gBJrOP
See also the answer of Pablo Barría Urenda, which does this asynchronously without BFS.
Documentation:
This behavior is described in FileSystemDirectoryReader (highlighted by me):
readEntries ()
Returns an array containing a number of entries in the directory . Each element of the array is an object based on FileSystemEntry — usually either FileSystemFileEntry or FileSystemDirectoryEntry.
But, in fairness, the MDN documentation can make this clearer in other sections. The readEntries () documentation just notes:
The readEntries () method retrieves the directory entries in the directory being read and delivers them to the array to the provided callback function
And the only mention / hint that several calls are required is the description of the successCallback parameter:
If there are no files, or you have already called readEntries () on this FileSystemDirectoryReader, the array is empty.
The API may be more intuitive, but as noted in the documentation, this is a non-standard function, not a standard track.