Sending list of images as response using Javascript

Question

I am making an API that gets a list of image names, then it has to download them one by one from S3 bucket and then send them all as a response.

The issue is that my images are being uploaded but it seems that when I put them in a list as base64 and then try to send the list then the list just comes up empty.

const getImagesById = async (req, res) => {
  const { id } = req.params;
  const imagesSet = new Map();

  try {
    const documentFromDB = await document.findOne({ id });

    documentFromDB.devices.forEach((device) => {
      const images = new Set();
      device.images.forEach(item => images.add(downloadFromS3(item)))
      imagesSet.set(device.name, JSON.stringify(mapToObj(images))) // tried adding just images also but neither works
    });
    res.status(200).json(JSON.stringify(mapToObj(imagesSet)));
  } catch (e) {
    console.log(`An error occurred : ${e.message}`);
    res.status(500)
      .send(e.message);
  }
};

function mapToObj(inputMap) {
  let obj = {};
  inputMap.forEach(function(value, key){
    obj[key] = value
  });
  return obj;
}

And this is how I get images from S3:

const downloadFromS3 = async (imageName) => {
  try {
    const image = await S3Utils.downloadFile(BUCKET_NAME, imageName);

    if (image.stack) {
      return null;
    }

    const imageBase64 = image.Body.toString('base64');
    return imageBase64;
  } catch (e) {
    console.log(`An error occurred while downloading : ${e.message}`);
    throw e;
  }
};

This is the response I am getting at the moment:

"{\"{ name: 'Martin'}\":\"{\\\"[object Promise]\\\":{}}\"}"

What I am trying to do is get a lits of device names, map them in a Map as key with value as the base64 list of images and then send it all in a response to the UI to show the images with the names.

What am I doing wrong here?

Answer 1

You just need to add await before call the downloadFromS3 function, consequently changing all the above functions.

const getImagesById = async (req, res) => {
  const { id } = req.params;
  const imagesSet = new Map();

  try {
    const documentFromDB = await document.findOne({ id });

    await Promise.all(documentFromDB.devices.map(async (device) => {
      const images = new Set();
      await Promise.all(device.images.map(async item => images.add(await downloadFromS3(item))))
      imagesSet.set(device.name, JSON.stringify(mapToObj(images))) // tried adding just images also but neither works
    }));
    res.status(200).json(JSON.stringify(mapToObj(imagesSet)));
  } catch (e) {
    console.log(`An error occurred : ${e.message}`);
    res.status(500)
      .send(e.message);
  }
};

function mapToObj(inputMap) {
  let obj = {};
  inputMap.forEach(function(value, key){
    obj[key] = value
  });
  return obj;
}