Add button to delete uploaded file

Author: zachspang

backend/internal/handlers/courses.go

@@ -364,3 +364,44 @@ func EditContent(c *fiber.Ctx) error {
 		"message": "Successfully updated content",
 	})
 }
+
+// Delete file from content
+func DeleteFile(c *fiber.Ctx) error {
+	creator_id, err := strconv.Atoi(c.Params("creator_id"))
+	if err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid creator_id"})
+	}
+
+	content_id, err := strconv.Atoi(c.Params("content_id"))
+	if err != nil {
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid content_id"})
+	}
+
+	var content entity.Content
+	// Check if the content exists
+	if err := database.DB.Model(entity.Content{}).Preload("Module.Course").Where("id = ?", content_id).First(&content).Error; err != nil {
+		return c.Status(fiber.StatusNotFound).JSON(fiber.Map{"error": "Course not found"})
+	}
+
+	module := content.Module
+	//Verify that the account attempting to edit is the creator of the course
+	if module.Course.CreatorID != creator_id {
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "User is not the course creator"})
+	}
+	
+	//Delete file
+	if _, err := os.Stat("./content"+content.Path); os.IsExist(err){
+		if err := os.Remove("./content"+content.Path); err != nil{
+			return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+		}
+	}
+
+	//Update database entry
+	if err := database.DB.Model(&content).Update("path", "").Error; err != nil{
+		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"message": err.Error()})
+	}
+	
+	return c.JSON(fiber.Map{
+		"message": "Successfully deleted file",
+	})
+}

backend/internal/router/route.go

@@ -87,6 +87,7 @@ func SetupRoutes(app *fiber.App) {
 	app.Post("/create-course/:creator_id", handlers.CreateCourse)
 	app.Post("/create-module/:creator_id/:course_id", handlers.CreateModule)
 	app.Post("/create-content/:creator_id/:module_id", handlers.CreateContent)
+	app.Post("/delete-file/:creator_id/:content_id", handlers.DeleteFile)
 	app.Post("/edit-content/:creator_id/:content_id", handlers.EditContent)
 	app.Post("/enroll/:user_id/:course_id", handlers.Enroll)
 }

frontend/src/components/Modal.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-export const Modal = ({ title, trigger, inputFields, changeHandler, confirmHandler, fileUploadHandler = null}) => {
+export const Modal = ({ title, trigger, inputFields, changeHandler, confirmHandler, fileUploadHandler, deleteFileHandler}) => {
     const [showModal, setShowModal] = useState(false);
 
     const close = () => {
@@ -46,10 +46,20 @@ export const Modal = ({ title, trigger, inputFields, changeHandler, confirmHandl
                         <h3 className="font-semibold text-lg mb-4">{title}</h3>
                         {fieldList}
                         {fileUploadHandler != null ? (
-                        <div>
-                            <h1>File Upload</h1>
-                            <input type="file" onChange={fileUploadHandler}/>
-                        </div>) : null
+                            <div>
+                                <h1>File Upload</h1>
+                                <input type="file" onChange={fileUploadHandler}/>
+                            </div>) : null
+                        }
+                        {deleteFileHandler != null ? (
+                            <div>
+                                <button
+                                    className="px-4 py-2 mt-2 border border-gray-300 rounded bg-red-500 text-white hover:bg-red-700"
+                                    onClick={deleteFileHandler}
+                                >
+                                    Delete Current File
+                                </button>
+                            </div>) : null
                         }
                         <div className="mt-4 flex justify-end space-x-2">
                             <button

frontend/src/components/pages/Content.js

@@ -26,7 +26,7 @@ export function Content() {
         setFile(e.target.files[0]);
     }
 
-    const handleEditContent = (contentID) => async (e) =>{
+    const handleEditContent = (contentID) => async (e) => {
         if (newContentInfo.title === "" && newContentInfo.body === "" && file === null){
             return
         } 
@@ -56,6 +56,27 @@ export function Content() {
         }
     };
 
+    const handleDeleteFile = (contentID) => async (e) => {
+        const userId = Cookies.get('userId');
+        try {
+            const response = await fetch(`http://localhost:4000/delete-file/${userId}/${contentID}`, {
+                method: "POST"
+            });
+
+            const data = await response.json();
+            if (response.ok) {
+                Notiflix.Notify.success("File successfully deleted!");
+                setTimeout(() => {
+                    window.location.reload();
+                }, 500);
+            } else {
+                Notiflix.Notify.failure(data.message || "File deletion failed");
+            }
+        } catch (error) {
+            Notiflix.Notify.failure("Error occurred during file deletion");
+        }
+    };
+
     useEffect(() => {
         const userId = Cookies.get('userId');
 
@@ -125,6 +146,7 @@ export function Content() {
                 changeHandler={handleContentChange}
                 confirmHandler={handleEditContent(contentID)}
                 fileUploadHandler={handleContentUpload}
+                deleteFileHandler={contentInfo.path !== "" ? handleDeleteFile(contentID) : null}
             />
 
         );