The readEntries method of FileSystemDirectoryReader was incorrectly used in a synchronous manner instead of asynchronously.

[perterHUAN]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader

What specific section or headline is this issue about?

Examples

What information was incorrect, unhelpful, or incomplete?

• The returned entries always remains an empty array ([]), because by the time readDirectory function completes, the callback of readEntries hasn't executed yet, leaving entries unaltered.
• The toArray() function is not defined here.
• The recursive logic is flawed. getEntries() fails to retrieve subfolders, preventing further traversal and acquisition of all files within directories. It also potentially leads to an infinite loop.

function readDirectory(directory) {
  let dirReader = directory.createReader();
  let entries = [];

  let getEntries = () => {
    dirReader.readEntries(
      (results) => {
        if (results.length) {
          entries = entries.concat(toArray(results));
          getEntries();
        }
      },
      (error) => {
        /* handle error — error is a FileError object */
      },
    );
  };

  getEntries();
  return entries;
}

What did you expect to see?

Given a FileSystemDirectoryEntry, obtain all files within the directory (including subdirectories) represented by this object.

Below is my attempted modification using promises.

function readDirectory(directory) {
  return new Promise((resolve, reject) => {
    let dirReader = directory.createReader();
    let entries = [];

    let getEntries = () => {
      dirReader.readEntries(
        (results) => {
          if (results.length) {
            const p = [];
            for (const entry of results) {
              if (entry.isDirectory) {
                p.push(readDirectory(entry));
              } else {
                p.push(Promise.resolve(entry));
              }
            }
            Promise.all(p).then((res) => {
              for (const e of res) {
                if (Array.isArray(e)) entries.push(...e);
                else entries.push(e);
              }
              resolve(entries);
            });
          } else {
            resolve([]);
          }
        },
        (error) => {
          /* handle error — error is a FileError object */
        }
      );
    };
    getEntries();
  });
}

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/api/filesystemdirectoryentry/createreader
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/filesystemdirectoryentry/createreader/index.md
• Last commit: ce85e3f
• Document last modified: 2024-03-11T23:58:17.000Z