I am able to upload and display single image via gridfs.However I am unable to stream multiple images at the same time. Below is a snippet of what I have done so far for retrieval of images.

ImageRoute.js

gfs = new mongoose.mongo.GridFSBucket(conn,{ bucketName: "uploads"});

Data is stored in Mondo DB in chunks and files collection.

Get Single image API ( this works fine and renders the image)

router.get('/image/:filename', (req, res) => {
  gfs.find({ filename: req.params.filename }).toArray((err, files) => {
    // Check if file
    if (!files[0] || files.length === 0) {
      return res.status(404).json({
        err: 'No file exists'
      });
    }
    // Check if image
    if (files[0].contentType === 'image/jpeg' || files[0].contentType === 'image/jpg') {
      // Read output to browser
      gfs.openDownloadStreamByName(req.params.filename).pipe(res);
      // readstream.pipe(res);
    } else {
      res.status(404).json({
        err: 'Not an image'
      });
    }
  });
});

Browse for multiple images API, this just displays the last image in the array.

router.get('/browse', (req, res) => {
  gfs.find().toArray((err, files) => {
    // Check if files
    if (!files || files.length === 0) {
      return res.status(404).json({
        err: 'No files exist'
      });
    }
    // Files exist...
    // return res.json(files);

    // Check if image
    const arr = [];
    for (var i = 0; i < files.length; i++) {
      if (files[i].contentType === 'image/jpeg' || files[i].contentType === 'image/jpg') {
        arr.push(files[i].filename);
        console.log(files[i].filename);
        // Read output to browser
        gfs.openDownloadStreamByName(arr[i]).pipe(res);
      } else {
        res.status(404).json({
          err: 'Not an image'
        });
      }
    }
  });
});

Appreciate any inputs here. My next step is to get this output of multiple images and render it to react UI.