S3:getObject() for Graphql - node.js

Question

Any help would greatly appreciate since this is my first time ever using AWS services.
So I am using the Apollo server and Graphql for the query/mutation. I have managed to upload my images to the S3 bucket.
Mutation: {
uploadToS3: async (parent, args, context, info) => {
const { createReadStream, filename, mimetype, encoding } = await args.file;
const stream = createReadStream();
const pathName = path.join(__dirname, `../public/images/${filename}`);
stream.pipe(fs.createWriteStream(pathName))
.then(upload(pathName, filename))
.catch(error => { console.log(error) });
}
Basically using Apollo Server File Upload I have managed to upload my image to the /public/images folder. Then after the file has been uploaded I then upload that file to the S3 bucket.
Here is the upload function from above
// uploads a file to s3
function upload(pathName, filename) {
const fileStream = fs.createReadStream(pathName);
const uploadParams = {
Bucket: bucketName,
Body: fileStream,
Key: filename
}
return s3.upload(uploadParams).promise();
}
The biggest problem I am facing is displaying that image from S3 to React App.
I found the URL from AWS https://<bucketName>.s3.amazonaws.com/<imageFile>
However, I got the:
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>G3C79X8WGN3SFR</RequestId>
<HostId>8RApYRDn565zy6ic8f8ZDqLKQx/IcLtz26NDHiLpc0Q566k6BbRB7z47WKHnYMpKDkz9gFVgc=</HostId>
</Error>
So the solution I found is S3.getObject()
// download a file from s3
function getFileStream(fileKey) {
const downloadParams = {
Key: fileKey,
Bucket: bucketName
}
return s3.getObject(downloadParams).promise();
}
But I got back this
{
AcceptRanges: 'bytes',
LastModified: 2021-06-03T02:54:55.000Z,
ContentLength: 0,
ETag: '"d41d8cd98f00b204e98098ecf8427e"',
ContentType: 'application/octet-stream',
Metadata: {},
Body: <Buffer >
}
I can't, or at least don't know how to use that to display the image to React through Graphql query/mutation.
Could anyone help me figure out how to write a Graphql query to fetch the image from S3 so I can use that query in React to display the data?
Again, any help, or documentations, or advice would greatly appreciate since I have been stuck for nearly 3 days

Answer 1

you can return the buffer as a base64 encoded string to the frontend.
data.Body.toString('base64');
then add the image as a data-uri in the html.
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="sunrise" />
I have tested the code below and it returns me a base64 string of the image.
import { S3 } from 'aws-sdk';
import { GetObjectOutput } from 'aws-sdk/clients/s3';
const s3 = new S3({ region: 'ap-southeast-2'});
(async () => {
const file: GetObjectOutput = await s3.getObject({
Bucket: 'getobject103',
Key: 'sample.jpeg'
}).promise();
console.log(file.Body.toString('base64'));
})()
In addition to the code above, I just wanted to illustrate you how I tested it with a screenshot.
Another solution is to use s3-presigned URL. Basically you use AWS credential(that has permissions to access the s3 object) from a backend service(such as express) and generate a pre-signed url. you can use the presigned url as the image url in the html. Remember, each presigned url generated gives access to a single image.
All objects by default are private. Only the object owner has permission to access these objects. However, the object owner can optionally share objects with others by creating a presigned URL, using their own security credentials, to grant time-limited permission to download the objects Sharing an object with a presigned URL
[how to generate s3 presigned url in nodejs3