delete uploaded file

backend/index.js

@@ -63,7 +63,9 @@ app.use("/steps", stepsDeleteRoute);
 
 // "/attachments"
 const attachmentsNewRoute = require("./routes/attachments/new")(sequelize);
+const attachmentsDeleteRoute = require("./routes/attachments/delete")(sequelize);
 app.use("/attachments", attachmentsNewRoute);
+app.use("/attachments", attachmentsDeleteRoute);
 
 // "/runs"
 const runsIndexRoute = require("./routes/runs/index")(sequelize);

backend/routes/attachments/delete.js

@@ -0,0 +1,47 @@
+const express = require("express");
+const router = express.Router();
+const path = require("path");
+const fs = require("fs");
+const defineAttachment = require("../../models/attachments");
+const { DataTypes } = require("sequelize");
+
+module.exports = function (sequelize) {
+  const Attachment = defineAttachment(sequelize, DataTypes);
+
+  router.delete("/:attachmentId", async (req, res) => {
+    const attachmentId = req.params.attachmentId;
+    const t = await sequelize.transaction();
+
+    try {
+      const attachment = await Attachment.findByPk(attachmentId);
+      if (!attachment) {
+        await t.rollback();
+        return res.status(404).send("Attachment not found");
+      }
+
+      // delete file from folder
+      const uploadDir = path.join(__dirname, "../../public");
+      const url = attachment.path;
+      const parts = url.split('/');
+      const fileNameWithFolder = parts.slice(-2).join('/');
+      const filePath = path.join(uploadDir, fileNameWithFolder);
+      fs.unlink(filePath, (err) => {
+        if (err) {
+          console.error('Error deleting file:', err);
+          t.rollback();
+          return res.status(404).send("Attachment not found");
+        }
+      });
+
+      await attachment.destroy({ transaction: t });
+      await t.commit();
+      res.status(204).send();
+    } catch (error) {
+      console.error(error);
+      await t.rollback();
+      res.status(500).send("Internal Server Error");
+    }
+  });
+
+  return router;
+};

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/case-editor.tsx

@@ -22,6 +22,7 @@ import {
   fetchDeleteStep,
   updateCase,
   fetchCreateAttachments,
+  fetchDeleteAttachment,
 } from "./caseControl";
 
 const defaultTestCase = {
@@ -113,6 +114,10 @@ export default function CaseEditor({
     fetchCreateAttachments(params.caseId, event.target.files);
   };
 
+  const onAttachmentDelete = async (attachmentId: number) => {
+    await fetchDeleteAttachment(attachmentId);
+  };
+
   useEffect(() => {
     async function fetchDataEffect() {
       try {
@@ -334,7 +339,7 @@ export default function CaseEditor({
         <h6>Attachments</h6>
         <CaseAttachmentsEditor
           attachments={testCase.Attachments}
-          onAttachmentDelete={(id) => console.log(id)}
+          onAttachmentDelete={onAttachmentDelete}
         />
         <div
           className="flex items-center justify-center w-96 mt-3"

frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/caseControl.ts

@@ -129,4 +129,35 @@ async function fetchCreateAttachments(caseId: number, files: File[]) {
   }
 }
 
-export { fetchCase, fetchCreateStep, fetchDeleteStep, updateCase, fetchCreateAttachments };
+/**
+ * delete attachment
+ */
+async function fetchDeleteAttachment(attachmentId: number) {
+  const fetchOptions = {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  const url = `${apiServer}/attachments/${attachmentId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error deleting project:", error);
+    throw error;
+  }
+}
+
+export {
+  fetchCase,
+  fetchCreateStep,
+  fetchDeleteStep,
+  updateCase,
+  fetchCreateAttachments,
+  fetchDeleteAttachment,
+};