feat: upload images to s3

package.json

@@ -13,6 +13,7 @@
     "fix:prettier": "pnpm lint:prettier --write"
   },
   "dependencies": {
+    "aws-sdk": "^2.1358.0",
     "clsx": "^1.2.1",
     "next": "^12.1.6",
     "next-pwa": "^5.5.4",

src/pages/api/upload.ts

@@ -0,0 +1,40 @@
+import type { NextApiRequest, NextApiResponse } from "next"
+
+import AWS from "aws-sdk"
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  // data is in base64
+  const { good, data: base64Data } = JSON.parse(req.body)
+
+  // convert base64 to buffer
+  const imgData = Buffer.from(base64Data.replace(/^data:image\/\w+;base64,/, ""), "base64")
+
+  // upload to S3
+  const s3 = new AWS.S3({
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
+  })
+
+  const filename = new Date().toISOString()
+
+  const type = base64Data.split(";")[0].split("/")[1]
+
+  const params: AWS.S3.PutObjectRequest = {
+    Bucket: process.env?.AWS_BUCKET_NAME ?? "",
+    Key: `${good ? "good" : "bad"}-${filename}.${type}`,
+    Body: imgData,
+    ACL: "public-read",
+    ContentEncoding: "base64", // required
+    ContentType: `image/${type}`, // required. Notice the back ticks
+  }
+
+  s3.upload(params, (err: any, data: any) => {
+    if (err) {
+      console.error(err)
+      res.status(500).json({ error: err })
+    } else {
+      console.log(data.Location)
+      res.status(200).json({ name: data.Location })
+    }
+  })
+}

src/pages/index.tsx

@@ -64,7 +64,25 @@ export default function HomePage() {
                 canvasRef?.current
                   ?.exportImage("png")
                   .then((data) => {
-                    console.log(data)
+                    // post to api route /upload
+                    fetch("/api/upload", {
+                      method: "POST",
+                      body: JSON.stringify({
+                        good: isGood,
+                        data,
+                      }),
+                    })
+                      .then((res) => {
+                        if (res.status === 200) {
+                          console.log("Success")
+                        }
+                      })
+                      .catch((e) => {
+                        console.error("Error", e)
+                      })
+                      .finally(() => {
+                        canvasRef?.current?.clearCanvas()
+                      })
                   })
                   .catch((e) => {
                     console.log(e)