added bucket functionality but running into server errors

package.json

@@ -23,6 +23,8 @@
     "packages/*"
   ],
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.577.0",
+    "@aws-sdk/s3-request-presigner": "^3.577.0",
     "dotenv-flow": "^4.1.0"
   }
-}
+}

packages/functions/src/generate-image-url.js

@@ -0,0 +1,51 @@
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { Bucket } from "sst/node/bucket";
+
+/* const s3Client = new S3Client({ region: process.env.AWS_REGION }); */
+const s3Client = new S3Client({});
+
+export const handler = async (event) => {
+  console.log('HERERERERERERE')
+  let body;
+  try {
+    body = JSON.parse(event.body);
+  } catch (error) {
+    return {
+      statusCode: 400,
+      body: JSON.stringify({ message: "Invalid request body" }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    };
+  }
+
+  const { name, contentType } = body;
+
+  if (!name || !contentType) {
+    return {
+      statusCode: 400,
+      body: JSON.stringify({ message: "Missing 'name' or 'contentType' in request body" }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    };
+  }
+
+  const key = `uploads/${name}-${Date.now()}.${contentType.split('/')[1]}`;
+  const command = new PutObjectCommand({
+    Bucket: Bucket.myFiles.bucketName,
+    Key: key,
+    ContentType: contentType,
+  });
+
+  const url = await getSignedUrl(s3Client, command, { expiresIn: 3600 }); // 1 hour expiration
+
+  return {
+    statusCode: 200,
+    body: JSON.stringify({ url, key }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+};

packages/web/src/components/CreateModal/CreateModal.jsx

@@ -28,7 +28,6 @@ import {
 } from "@chakra-ui/react";
 // import logo from "../../assets/images/small_logo.png";
 import { storage } from "../../firebase";
-import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { MdDriveFileRenameOutline, MdOutlineDescription } from "react-icons/md";
 import { FaMagnifyingGlass } from "react-icons/fa6";
 import { SlCalender } from "react-icons/sl";
@@ -57,30 +56,21 @@ export default function CreateModal({
 }) {
   const [isLoading, setIsLoading] = useState(false);
 
-  const uploadFile = useCallback(() => {
+  const uploadFile = useCallback(async () => {
     if (!newAddedItem.image) return;
 
-    const time = new Date().getTime();
-    const imageRef = ref(
-      storage,
-      `zotnfound2/images/${time + newAddedItem.image.name}`
-    );
-
-    uploadBytes(imageRef, newAddedItem.image).then((snapshot) => {
-      getDownloadURL(snapshot.ref).then((url) => {
-        if (
-          url.includes(
-            "https://firebasestorage.googleapis.com/v0/b/zotnfound2.appspot.com/o/zotnfound2%2Fimages%2FNaN"
-          )
-        ) {
-          setUploadImg("");
-        } else {
-          setUploadImg(url);
-          setNewAddedItem((prev) => ({ ...prev, image: url }));
-          setIsLoading(false);
-        }
-      });
+    const response = await fetch('https://quywdntac0.execute-api.us-east-1.amazonaws.com/image-url', {
+      body: JSON.stringify({ "name": newAddedItem.image.name, "contentType": newAddedItem.image.type }),
+      method: "POST",
     });
+    const data = await response.json()
+    console.log(data)
+    const url = data.url
+    const key = data.key
+
+    setUploadImg(url);
+    setNewAddedItem((prev) => ({ ...prev, image: url }));
+    setIsLoading(false);
   }, [newAddedItem.image, setUploadImg, setNewAddedItem, setIsLoading]);
 
   const [date, setDate] = useState(new Date());