Return result after for loop finishes adding to array

Question

I'm trying to return an array after a forEach loop has finished adding items to it. I have tried several methods but they all either return an empty array or an unresolved promise.

My Code

class handleFiles {
  constructor() {
    this.promiseFiles = [];
    this.promiseFolders = [];
  }
  async returnFilesAndFolders() {
    fs.readdir("uploads", (err, files) => {
      files.forEach((file) => {
        if (fs.statSync(path.resolve(`uploads/${file}`)).isFile()) {
          this.promiseFiles.push(file);
        } else if (fs.statSync(path.resolve(`uploads/${file}`)).isDirectory()) {
          this.promiseFolders.push(file);
        } else {
        }
      });
    });
    let combined = {
      sendFiles: Promise.all(this.promiseFiles),
      sendFolders: Promise.all(this.promiseFolders),
    };
    return combined;
  }
}

Calling the class

app.get("/:dir?", (req, res) => {
  let dir = req.params.dir;
  console.log(dir);
  let fileHandler = new handleFiles();

  fileHandler.returnFilesAndFolders().then((data) => {
    console.log(data);
    res.render("index", {
      data: data,
    });
  });
});

Answer 1

Your original implementation has several timing problems. Your .forEach() loop does not wait for any of the async operations inside it to complete so you end up calling Promise.all() before the arrays are filled. I would suggest using the fs operations that have built-in promise support and also use the withFileTypes option with fs.promises.readdir():

class handleFiles {
  constructor() {
    this.promiseFiles = [];
    this.promiseFolders = [];
  }
  async getFilesAndFolders() {
      let files = await fs.promises.readdir("uploads", {withFileTypes: true});
      for (let file of files) {
          if (file.isFile()) {
              this.promiseFiles.push(file.name);
          } else if (file.isDirectory()) {
              this.promiseFolders.push(file.name);
          }
      }
      return {
          sendFiles: this.promiseFiles,
          sendFolders: this.promiseFolders
      }
  }
}

Note: this implementation is a bit odd in that it is BOTH filling this.promiseFiles and this.promiseFolders and is returning a promise that resolves to an object containing that data. I'd really suggest you do one or the other. Also, because of this side-effect programming of adding to this.promiseFiles and this.promiseFolders, if you call getFilesAndFolders() more than once, it will create duplicates.

Perhaps you don't need this data in your instance data at all and the method can just return a promise that resolves to the object as so:

class handleFiles {
  constructor() {
  }
  async fillFilesAndFolders() {
      const sendFiles = [], sendFolders = [];
      let files = await fs.promises.readdir("uploads", {withFileTypes: true});
      for (let file of files) {
          if (file.isFile()) {
              sendFiles.push(file.name);
          } else if (file.isDirectory()) {
              sendFolders.push(file.name);
          }
      }
      return {
          sendFiles,
          sendFolders
      };
  }
}

But, now this is just a static method that doesn't really have anything to do with the class so perhaps it could just be a stand-alone function or a static method.

Step-by-step Description in the 2nd solution:

1. Declare local variables promiseFolders and promiseFiles.
2. Call await fs.promises.readdir() so we can use the promise interface for readdir.
3. Pass the withFileTypes option so we get access to isFile() and isDirectory() without making an additional call for every file.
4. Iterate through the list of files and populate the desired promiseFiles or promiseFolders array with the file's name.
5. Build the returned data structure and return it (which will be the resolved value of the promise returned from the parent async function.

Answer 2

async returnFilesAndFolders() {
  // Return the fs.readdir promise.
  return fs.readdir("uploads").then((files) => {

    // Collect the files into files and folders.
    return files.reduce((acc, file) => {
      // Get the status of the file.
      const stat = fs.statSync(path.resolve(`uploads/${file}`));

      if (stat.isFile()) {
        acc.sendFiles.push(file);
      }
      elseif (stat.isDirectory()) {
        acc.sendFolders.push(file);
      }

      return acc;
    }, {sendFiles: [], sendFolders: []})
  });
}

file is just a string, not a promise, so it doesn't need to be resolved. fs.readdir returns a promise, so it can be used with .then. The intermediary promiseFiles and promiseFolders will be empty when the process exits, but they aren't needed because file is not a promise.