Implement the Image service for compression and upload

Author: BengeeL

backend/src/modules/content/controllers/content.controller.ts

@@ -45,7 +45,7 @@ export class ContentController {
       const file = files.thumbnail[0];
       const fileName = file.newFilename;
       const fileType = file.mimetype;
-      const filePath = file.filepath; // Use 'filepath' for formidable v2+
+      const filePath = file.filepath; 
 
       try {
         if (!filePath) {
@@ -54,10 +54,10 @@ export class ContentController {
 
         // Pass the file object with the correct path to StorageService
         const response = await StorageService.uploadFile(
-          { ...file, path: filePath }, // Ensure 'path' is set if your StorageService expects it
+          { ...file, path: filePath }, 
           "thumbnails",
           fileName,
-          fileType,
+          fileType
         );
         res.status(201).json(response);
       } catch (error: any) {
@@ -86,15 +86,16 @@ export class ContentController {
 
   static async editContent(req: Request, res: Response) {
     console.log("Fetching Content...");
-    const { contentId, userId } = req.params;
-    const { data } = req.body;
+    const { contentId } = req.params;
+    const data = req.body;
+    const uid = req.user?.uid;
 
     try {
       // const confirmation = await axios.get(`${apiURL}/content/${contentId}`)
       const confirmation = await ContentService.getContent(contentId);
       const owner_id = confirmation?.creatorUID;
 
-      if (userId == owner_id) {
+      if (uid == owner_id) {
         //check whether they are allowed to edit the content
         const response = await ContentService.editContent(contentId, data);
         res.status(200).json(response);
@@ -104,7 +105,7 @@ export class ContentController {
     } catch (error: any) {
       console.log(error);
       res
-        .status(401)
+        .status(500)
         .json({ error: error.message || "Failed to edit content" });
     }
   }
@@ -156,7 +157,7 @@ export class ContentController {
               file,
               "thumbnails",
               fileName,
-              fileType,
+              fileType
             );
 
             const updateData = JSON.parse(fields.data);

backend/src/modules/content/routes/content.routes.ts

@@ -1,6 +1,7 @@
 import { Router } from "express";
 import { ContentController } from "../controllers/content.controller";
 import commentRouter from "./comment.routes";
+import { authenticateToken } from "../../../shared/middleware/auth";
 
 const contentRoutes = Router();
 
@@ -23,7 +24,11 @@ contentRoutes.put("/shares/:contentId", ContentController.incrementShareCount);
 
 contentRoutes.delete("/:contentId", ContentController.deleteContent); // Delete content by ID
 
-contentRoutes.put("/:contentId/:userId", ContentController.editContent); // Edit content by ID
+contentRoutes.put(
+  "/:contentId",
+  authenticateToken,
+  ContentController.editContent
+); // Edit content by ID
 contentRoutes.put(
   "/editThumbnail/:contentId/:userId",
   ContentController.editContentAndThumbnail

backend/src/modules/storage/services/storage.service.ts

@@ -107,14 +107,18 @@ export class StorageService {
         throw new Error("No valid file data found (no filepath or buffer).");
       }
 
+      // Saving File to direct path
       fileName = `${fileName}${fileType ? `.${fileType.split("/")[1]}` : ""}`;
-
       const fullPath = path.join(dir, fileName);
       await fs.writeFile(fullPath, fileBuffer);
       logger.info(`File saved locally at ${fullPath}`);
 
+      // Returning URL for the file
+      const urlPath = `${filePath}/${fileName}`;
+      const url = `http://localhost:3000/local_uploads/${urlPath}`;
+
       // Return the absolute file system path
-      return { url: fullPath };
+      return { url };
     } catch (error: any) {
       logger.error("Local upload error:", error);
       throw new Error(`Local upload failed: ${error.message}`);

frontend/src/components/content/CommentList.tsx

@@ -54,8 +54,11 @@ export default function CommentList({
       setLoading(false);
       return;
     }
-    setComments(commentsResult);
-    setNumComments(commentsResult.length);
+
+    if (commentsResult) {
+      setComments(commentsResult);
+      setNumComments(commentsResult.length);
+    }
     setLoading(false);
   };