aws s3

Author: sameer2210

backend/bun.lock

@@ -8,6 +8,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.1020.0",
     "bcryptjs": "^3.0.2",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
@@ -16,7 +17,8 @@
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^9.2.3",
     "morgan": "^1.10.1",
-    "multer": "^2.0.2",
+    "multer": "^2.1.1",
+    "multer-s3": "^3.0.1",
     "ngrok": "^5.0.0-beta.2"
   },
   "devDependencies": {

backend/package.json

@@ -0,0 +1,10 @@
+// config/s3.js
+import { S3Client } from '@aws-sdk/client-s3';
+
+export const s3 = new S3Client({
+  region: process.env.AWS_BUCKET_REGION,
+  credentials: {
+    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+    secretAccessKey: process.env.AWS_ACCESS_SECRET,
+  },
+});

backend/src/config/Aws.js

@@ -1,4 +1,6 @@
 import mongoose from "mongoose";
+import { DeleteObjectCommand } from "@aws-sdk/client-s3";
+import { s3 } from "../config/Aws.js";
 
 const OBJECT_ID_PATTERN = /^[a-f\d]{24}$/i;
 
@@ -273,6 +275,22 @@ const pickAllowed = (payload, allowedFields) => {
 
 const isAdmin = (req) => req.user && req.user.role === "admin";
 
+const deleteS3Object = async (key) => {
+  const bucket = process.env.AWS_BUCKET_NAME;
+  if (!bucket || !key) return;
+
+  try {
+    await s3.send(
+      new DeleteObjectCommand({
+        Bucket: bucket,
+        Key: key,
+      })
+    );
+  } catch (error) {
+    console.error(`Failed to delete S3 object: ${key}`, error);
+  }
+};
+
 const ensureOwner = (doc, req, ownerField) => {
   if (!ownerField || isAdmin(req)) return true;
   const ownerId = doc?.[ownerField]?.toString();
@@ -388,16 +406,26 @@ export const buildCrudController = (
   const create = async (req, res, next) => {
     try {
       let payload = sanitizePayload(req.body || {}, req, ownerField, allowedFields);
+
       if (assignOwnerOnCreate) {
         payload = assignOwner(payload, req, ownerField, allowAdminOverride);
       }
+
+      if (req.file) {
+        const uploadedUrl = req.file.location;
+        payload.image = uploadedUrl;
+        payload.images = [uploadedUrl];
+        payload.imageKey = req.file.key;
+      }
+
       const created = await Model.create(payload);
+
       res.status(201).json(created);
     } catch (error) {
       next(error);
     }
   };
-
+  
   const update = async (req, res, next) => {
     try {
       const doc = await Model.findById(req.params.id);
@@ -410,8 +438,23 @@ export const buildCrudController = (
         throw new Error("Not authorized to update this resource");
       }
       const updates = sanitizePayload(req.body || {}, req, ownerField, allowedFields);
+      let previousImageKey = null;
+
+      if (req.file) {
+        previousImageKey = doc.imageKey || null;
+        const uploadedUrl = req.file.location;
+        updates.image = uploadedUrl;
+        updates.images = [uploadedUrl];
+        updates.imageKey = req.file.key;
+      }
+
       Object.assign(doc, updates);
       const updated = await doc.save();
+
+      if (req.file && previousImageKey && previousImageKey !== updated.imageKey) {
+        await deleteS3Object(previousImageKey);
+      }
+
       res.json(updated);
     } catch (error) {
       next(error);
@@ -429,7 +472,14 @@ export const buildCrudController = (
         res.status(403);
         throw new Error("Not authorized to delete this resource");
       }
+
+      const imageKeyToDelete = doc.imageKey || null;
       await doc.deleteOne();
+
+      if (imageKeyToDelete) {
+        await deleteS3Object(imageKeyToDelete);
+      }
+
       res.json({ message: `${resourceName} deleted`, id: req.params.id });
     } catch (error) {
       next(error);

backend/src/config/cloudinary.js

@@ -0,0 +1,16 @@
+import multer from 'multer';
+import multerS3 from 'multer-s3';
+import { s3 } from '../config/Aws.js';
+
+const upload = multer({
+  storage: multerS3({
+    s3,
+    bucket: process.env.AWS_BUCKET_NAME,
+    contentType: multerS3.AUTO_CONTENT_TYPE,
+    key: function (req, file, cb) {
+      cb(null, `uploads/${Date.now()}-${file.originalname}`);
+    },
+  }),
+});
+
+export default upload;

backend/src/controllers/crud.controller.js

@@ -37,6 +37,10 @@ const projectSchema = new mongoose.Schema(
       type: String,
       trim: true,
     },
+    imageKey: {
+      type: String,
+      trim: true,
+    },
     liveDemo: {
       type: String,
       trim: true,

backend/src/middleware/aws.middleware.js

@@ -7,19 +7,20 @@ import {
   updateProject,
 } from '../controllers/project.controller.js';
 import { protect, requireRole } from '../middleware/auth.middleware.js';
+import upload from '../middleware/aws.middleware.js';
 
 const router = express.Router();
 
 router
   .route('/')
   .get(getProjects)
-  .post(protect, requireRole('developer', 'admin'), createProject);
+  .post(protect, requireRole('developer', 'admin'),upload.single("image"), createProject);
 
 router
   .route('/:id')
   .get(getProjectById)
-  .put(protect, requireRole('developer', 'admin'), updateProject)
-  .patch(protect, requireRole('developer', 'admin'), updateProject)
+  .put(protect, requireRole('developer', 'admin'),upload.single("image"), updateProject)
+  .patch(protect, requireRole('developer', 'admin'),upload.single("image"), updateProject)
   .delete(protect, requireRole('developer', 'admin'), deleteProject);
 
 export default router;

backend/src/models/project.model.js

@@ -43,6 +43,44 @@ const buildParams = ({
   return params;
 };
 
+const isFileLike = (value) =>
+  typeof File !== "undefined" && value instanceof File;
+
+const isFileListLike = (value) =>
+  typeof FileList !== "undefined" && value instanceof FileList;
+
+const extractImageFile = (payload = {}) => {
+  const raw = payload.imageFile;
+  if (!raw) return null;
+  if (isFileLike(raw)) return raw;
+  if (isFileListLike(raw)) return raw[0] || null;
+  if (Array.isArray(raw)) return raw[0] || null;
+  return null;
+};
+
+const buildRequestBody = (payload = {}) => {
+  const imageFile = extractImageFile(payload);
+  if (!imageFile) return payload;
+
+  const body = new FormData();
+  Object.entries(payload).forEach(([key, value]) => {
+    if (key === "imageFile") return;
+    if (value === undefined || value === null || value === "") return;
+
+    if (Array.isArray(value)) {
+      value
+        .filter((item) => item !== undefined && item !== null && item !== "")
+        .forEach((item) => body.append(`${key}[]`, item));
+      return;
+    }
+
+    body.append(key, value);
+  });
+
+  body.append("image", imageFile);
+  return body;
+};
+
 const fetchProjects = async ({
   search,
   page,
@@ -136,7 +174,7 @@ export const useCreateProject = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async (payload) => {
-      const { data } = await http.post("/api/projects", payload);
+      const { data } = await http.post("/api/projects", buildRequestBody(payload));
       return data;
     },
     onSuccess: (created) => {
@@ -155,7 +193,10 @@ export const useUpdateProject = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({ id, payload }) => {
-      const { data } = await http.patch(`/api/projects/${id}`, payload);
+      const { data } = await http.patch(
+        `/api/projects/${id}`,
+        buildRequestBody(payload)
+      );
       return data;
     },
     onSuccess: (updated, variables) => {

backend/src/routes/project.routes.js

@@ -2,6 +2,7 @@ import {
   Save,
   Trash2,
   Image,
+  Upload,
   FileText,
   Tag,
   Link2,
@@ -12,7 +13,7 @@ import {
   Sparkles,
 } from "lucide-react";
 import { useFieldArray, useForm } from "react-hook-form";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Button from "../common/Button";
 
 const InputField = ({ label, icon: Icon, error, children, required }) => (
@@ -159,7 +160,29 @@ const ProjectForm = ({
   }, [defaultValues, reset]);
 
   const watchedImage = watch("image");
+  const watchedImageFile = watch("imageFile");
   const watchedImages = watch("images") || [];
+  const [filePreviewUrl, setFilePreviewUrl] = useState("");
+
+  const selectedImageFile = Array.isArray(watchedImageFile)
+    ? watchedImageFile[0]
+    : watchedImageFile?.[0] || null;
+
+  useEffect(() => {
+    if (!selectedImageFile) {
+      setFilePreviewUrl("");
+      return undefined;
+    }
+
+    const objectUrl = URL.createObjectURL(selectedImageFile);
+    setFilePreviewUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [selectedImageFile]);
+
+  const mainPreviewImage =
+    filePreviewUrl ||
+    (typeof watchedImage === "string" ? watchedImage.trim() : "");
+
   const previewImages = Array.isArray(watchedImages)
     ? watchedImages.filter((value) => typeof value === "string" && value.trim())
     : [];
@@ -171,11 +194,11 @@ const ProjectForm = ({
     <div className="max-w-4xl mx-auto p-6">
       <div className="bg-white rounded-xl shadow-lg border border-gray-100">
         <form onSubmit={handleSubmit(onSubmit)} className="p-6 space-y-6">
-          {(watchedImage || previewImages.length > 0) && (
+          {(mainPreviewImage || previewImages.length > 0) && (
             <div className="flex flex-col items-center gap-3">
-              {watchedImage && (
+              {mainPreviewImage && (
                 <img
-                  src={watchedImage}
+                  src={mainPreviewImage}
                   alt="Project preview"
                   className="w-28 h-28 object-cover rounded-lg border border-gray-200"
                   onError={(e) => e.target.classList.add("hidden")}
@@ -199,15 +222,24 @@ const ProjectForm = ({
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-4">
-              <InputField label="Feed Image" icon={Image} error={errors.image}>
+              <InputField label="Upload Cover Image" icon={Upload} error={errors.imageFile}>
+                <input
+                  {...register("imageFile")}
+                  type="file"
+                  accept="image/*"
+                  className={`${inputStyles} file:mr-3 file:rounded file:border-0 file:bg-gray-900 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-white`}
+                />
+              </InputField>
+
+              <InputField label="Cover Image URL (optional)" icon={Image} error={errors.image}>
                 <input
                   {...register("image", {
                     pattern: {
                       value: URL_PATTERN,
                       message: "Please enter a valid image URL",
                     },
                   })}
-                  placeholder="https://example.com/feed.jpg"
+                  placeholder="https://example.com/cover.jpg"
                   type="url"
                   className={inputStyles}
                 />