In this repo is the codebase for a basic image upload that will take your image, resize it, give it a unique name and ship the image in bytes to AWS S3 Bucket while simultaneously sending that image name to a MongoDB collection.
The motivation for this tool was to allow a user to create an event on the AccessiCity site with an image to go along with the other information about said event. To have the cards display dynamically these images had to be stored somewhere that could be accessed by the server and frontend. Below you will find the kind of map I took to make this connection happen.
Some of the main challenges were deprecation of the codebase used in the tutorials I was following, limitations in the code being written in TypeScript, the tutorials using MySQL and Prisma ORM which was not my preferred database that we used in the AccessiCity app build out and a number of other challenges along the way.
This was the first tutorial I found from Sam Meech-Ward. It put me on to the idea of the Multer package and uploading to S3 Bucket. It was made in 2021 and at the time of making this readme it was 2 years old. Meech-Ward had made an updated tutorial that used TypeScript, Prisma, and MySQL. The following are the steps I took using this updated tutorial.
Multer takes the image file and converts it into bytes and saves it in local storage. From there the S3 client takes the bytes and sends it to the bucket for storage.
Before it gets sent to storage the file name must be made unique so that it is not written over if two files happen to have the same name. To do this I used another package called Crypto which is actually now a built-in Node module. Super handy! And after the image gets its new unique name I used another package called Sharp which "convert(s) large images in common formats to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images of varying dimensions" as said in the npm docs.
To initialize the Prisma ORM for this Multer S3 Bucket tutorial from Sam Meech-Ward I had to explore the Prisma documentation and watched a few videos explaining what Prisma was and how to use it. This is a list of the resources for Prisma:
Link to a demo
To better serve the image files globally, the next step was to setup a
CloudFront CDN with AWS. The AWS process had be updated regarding the security features. I had to work through some of the settings with the new methods.
After setting up the CDN, to better secure the image URLs from scrappers and other crawler bots, this tutorial teaches how to use the AWS CloudFront Signer package to attach the public key to the image file.
""
Another Option
I will now go back to the main project and implement this tool for the event creation.