Notes:

• High level overview of process:
  • User uploads an image (use FormData() in React to send the file as a multipart/formdata)
  • Image is sent to an AWS S3 bucket
  • frontend/backend retrieves image url from MongoDB and displays the image to the user

Setting Up S3 Bucket

• Make env variables to store:
  • bucket name, region, access key, etc
• Open IAM to create a user to represent the webapp and make a policy
  • Make a policy in IAM to specify actions allowed in S3 bucket
    • Serive for policy: S3
    • Actions enabled:
      • Read: GetObject
      • Write: PutObject
      • Write: DeleteObject
    • Resources (specify which bucket web app is allowed to perform actions on):
      • Bucket name: (name of bucket)
      • Object name: * //to allow web app to read/write any object in our bucket
    • Name the policy
  • Create a new user in IAM
    1. Name the user
    2. Select Access key as the AWS credential type
    3. Attach an existing policy: enter the policy we just made
• Now that we are given the access key and secret access key, using client-s3 node module, we can create a new S3Client with our credentials and region

import { S3Client, ... } from "@aws-sdk/client-s3"

const s3 = new S3Client({
	credentials: {
		accessKeyId: accessKey, //accessKey is a dotEnv variable
		secretAccessKey: secretAccessKey, //secretAccesskey is a dotEnv variable
	},
	region: bucketRegion
});

Using Multer

Multer is middleware which handles file uploading. When using the single() function from the multer package, multer adds a file object to the req object which contains information about the uploaded file.

• In our post route for example, we will need to add a parameter that will represent the image

const storage = multer.memoryStorage()
const upload = multer({ storage: storage })
...
//routes, other code
router.post("/", upload.single('image'), async (req: any, res: any) => {
	...
}

Backend

We will need to modify our event routes to account for the addition of images into the S3 bucket

For example:

• In our post function:

  • we would specify the params of what is going into the S3 bucket
  • Send the image to the s3 bucket

  const multer  = require('multer')
  import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
  import dotenv from "dotenv";
  
  dotenv.config();
  // connect to aws s3
  const bucketName = process.env.BUCKET_NAME;
  const region = process.env.BUCKET_REGION;
  const accessKeyId = process.env.ACCESS_KEY!;
  const secretAccessKey = process.env.SECRET_ACCESS_KEY!;
  
  const s3Client = new S3Client({
    region,
    endpoint: `https://s3.${region}.amazonaws.com`,
    credentials: {
      accessKeyId,
      secretAccessKey,
    },
  });
  
  router.post("/upload", upload.single("file"), async (req: any, res: any) => {
    const { file } = req;
    // return error if file not found
    if (file === null) {
      return res.status(400).send("No file uploaded.");
    }
  
  	//random fileName
    const fileName =
      Math.random().toString(36).substring(2, 15) +
      Math.random().toString(36).substring(2, 15);
  
    const params = {
      Bucket: bucketName,
      Body: file.buffer,
      Key: fileName,
      ContentType: file.mimetype,
    };
    try {
      // put object into s3 bucket
      await s3Client.send(new PutObjectCommand(params));
      // returns key of the image
      const url = `https://bucketName.s3.region.amazonaws.com/${fileName}`;
      // return url
      res.send(url);
    } catch (error) {
      res.send(error);
    }
  });
  

Frontend

In the frontend, one possible solution is to send only the image as a formData() so that the image is encoded as a “multipart/formdata” file and continue to send the other parameters as a json file. In the backend, we can add just the image data onto the S3 bucket and store the image link in the MongoDB

const [file, setFile] = useState<File>();
...
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        if (!file) {
          alert("Please select a file.");
          return;
        }
        // create FormData object
        const formData = new FormData();
        formData.append("image", file);
      
        try {
          // upload image to S3 bucket
          const response = await fetch(`${PORT}/upload"` {
            method: "POST",
            body: formData,
          });
      
          if (response.ok) {
            const data = await response.text();
            const imageURL = data; // get image url from S3 response
            await fetch(`${PORT}/posts/` {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                ...
              }),
            });
            alert("Successfully uploaded");
          } else {
            console.error("Failed to upload image");
          }
        } catch (error) {
          console.error(error);
        }
      };

Retrieving Image

• In our post route, we return a url which can then be submitted into your Database