Save image in AWS s3

Question

I am planning to have my app save images along with some form data in AWS. I already know how to save Angular form data in DynamoDB via API gateway and lambda. But I haven't found a good way to save the image and store the image S3 location in DynamoDB. Could someone let me know what would be best practice? If you have any reference, would be greatly appreciated.

I am thinking possibly saving the image to S3 directly from Angular then have a lambda listen an the event and save the image S3 location in DynamoDB. But haven't found a good way to save to S3 directly from Angular.

Another way could be to have the lambda storing data in DynamoDB to save the image then use the S3 location to make the DB save. But haven't find an example of this.

Maybe there is a better way. Please advise. Thank you!

Answer 1

First of all, its important to have a direct upload mechanism to upload Images to S3 without going through the API Gateway. Since we also don't want to keep the S3 bucket public, you can use one of the following options to upload images while having access control in place.

• Generate SignedUrls from an API endpoint, either with S3 Signed URLs or CloudFront Signed URLs (If you use CloudFront).
• Use IAM temperory access credentials to upload files to S3, either by having an API endpoint to generate those or using Cognito Federated Identities (If you use Cognito Userpools as the IDP it will be more straightforward).

This way you will be able to directly upload to S3 from your Angular App. Then let us look at how you can save the S3 file path in DynamoDB.

• Synchronous: After S3 upload callback, save the URL (Can generate the URL using bucket name + path + file name) in DynamoDB using an API call.
• Asynchronous: Having event-driven pipeline with an S3 trigger to Lambda to do the saving to DynamoDB.

Normally in an Angular app, you need to show the image as soon as you upload. For this, if you use the Asynchronous approach, you can construct the image URL and display it in Angular App (If you have a screen or component to show it) while expecting Lambda to add it and store it in DynamoDB.

Note: Here, I haven't mentioned any approach better compared to other since each one has tradeoffs over the other.