How do I get multiple images from aws-s3 in one request and return the base64 datastream? [MERN app]

Question

I have a page in my app which has 3 images which are stored in AWS S3.

I've been able to get it to work for a single image, but I can't understand how to get all of them at once. As an aside, I'm using a POST route because I'm sending an array of S3 "key" values stored in my database when the images get uploaded to s3.

//fn to get the object from the bucket
async function getImage(img) {
    const data = s3.getObject({
        Bucket: bucketName,
        Key: img
    }).promise()
    return data
}

//req which receives an array of Keys, of which I'm just using 1 for testing
//and converts encodes it into the datastream which I'm using for the src client-side.

router.post('/s3get', (req, res, next) => {
    function encode(data) {
        let buf = Buffer.from(data);
        let base64 = buf.toString('base64');
        return base64
    }
    getImage(req.body.images[0])
        .then((img) => {
            let imageb64 = encode(img.Body);
            res.json({
                image: imageb64
            })
        }).catch((e) => {
            res.send(e)
        })
}

This code is working for retrieving a single image but how do I get all 3?

AWS S3 does not have a built in method for retrieving multiple Objects at once that I am aware of, so I need to retrieve them all one by one, then combine the results.

But how do I do that within a single request, then send a json object back to my front-end containing the 3 image base64 encoded values? like:

res.json({
  images: [img1, img2, img3]
})

I was experimenting with "Promise.all()" but can't seem to figure out how to work the encoding in there and deal with each one properly.

    router.post('/s3get', (req, res, next) => {
        const {images} = req.body
        function encode(data) {
            let buf = Buffer.from(data);
            let base64 = buf.toString('base64');
            return base64
        }
        const responses = await Promise.all(
            images.map((img) => s3.getObject({
                Bucket: 'energitransport',
                Key: img
            }).promise())
        )
        console.log(responses)
    }

I was getting this back, but I was seeing the same data 3 times so first off I'm not sure why it's not iterating through each Key value. I confirmed each key value was present by console.log within the map function...so idk. Secondly I can't figure out how to work in the encoding in there and return a single json object.

[
  {
    AcceptRanges: 'bytes',
    LastModified: 2022-09-16T07:15:32.000Z,
    ContentLength: 22332,
    ETag: '"notTheActualDataHere"',
    ContentType: 'application/octet-stream',
    Metadata: { fieldname: 'Testing Metadata' },
    Body: 
  },

How do I get multiple images from aws-s3 in one request and return the base64 datastream? [MERN app]

0 Answers