feat(Delete image in folder + db ): delete in folder + db, add in folder + db

src/components/ModalModifyImages.jsx

@@ -20,12 +20,11 @@ import { RiEditBoxLine } from "react-icons/ri";
 
 export default function ModalModifyImages(props) {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { images, user, userData, setUserData, files, setFiles } = props;
+  const { images, user, userData, setUserData } = props;
   const [listImage, setlistImage] = useState(images);
   const toast = useToast();
 
   const uploadImage = async (file) => {
-    console.log(file);
     const body = new FormData();
     body.append("file", file);
     const imagePostOptions = {
@@ -33,14 +32,34 @@ export default function ModalModifyImages(props) {
       body,
     };
 
-    fetch(`/api/file/file`, imagePostOptions)
+    const imagePatchOptions = {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        images: [...listImage, `imageUsers/${file.name}`],
+      }),
+    };
+
+    fetch(`/api/file/uploadFile`, imagePostOptions)
+      .then((res) => {
+        fetch(`/api/users/${user.id}`, imagePatchOptions)
           .then((res) => {
-        console.log(res);
             toast({
               title: `Ajout d'image effectué`,
               status: "success",
               isClosable: true,
             });
+            setlistImage([...listImage, `imageUsers/${file.name}`]);
+            // router.reload();
+          })
+          .catch(() => {
+            setIsLoading(false);
+            toast({
+              title: `Erreur lors de l'ajout des images`,
+              status: "error",
+              isClosable: true,
+            });
+          });
       })
       .catch((err) => {
         toast({
@@ -53,16 +72,32 @@ export default function ModalModifyImages(props) {
   };
 
   const deleteImage = async (fileName) => {
-    const body = new FormData();
+    let newListImage = listImage;
-    body.append("fileName", fileName);
+    const index = newListImage.indexOf(fileName);
+
+    if (index > -1) {
+      newListImage.splice(index, 1);
+      setlistImage(newListImage);
+    }
+
+    // setlistImage(listImage.filter((image) => image !== fileName));
+
     const imageDeleteOptions = {
       method: "DELETE",
+      body: JSON.stringify({ fileName: fileName.split("/").pop() }),
     };
 
-    fetch(`/api/file/file/${fileName}`, imageDeleteOptions)
+    fetch(`/api/file/deleteFile`, imageDeleteOptions).then((res) => {
+      const imagePatchOptions = {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          images: [...listImage],
+        }),
+      };
+      fetch(`/api/users/${user.id}`, imagePatchOptions)
         .then((res) => {
-        console.log(res);
+          toast({
-        Toast({
             title: `Suppression d'image effectué`,
             status: "success",
             isClosable: true,
@@ -75,6 +110,7 @@ export default function ModalModifyImages(props) {
             isClosable: true,
           });
         });
+    });
   };
 
   return (
@@ -107,16 +143,19 @@ export default function ModalModifyImages(props) {
                 <GridItem key={index}>
                   <Flex direction={"column"} gap={"1rem"}>
                     <Image src={image} />
+                    {index === listImage.length - 1 ? (
                       <Button
                         id={"" + index}
                         colorScheme={"red"}
                         onClick={(e) => {
-                        setlistImage(listImage.filter((_, i) => i !== index));
+                          deleteImage(`${listImage[index]}`);
-                        setFiles(files.filter((_, i) => i !== index));
                         }}
                       >
                         Supprimer l'image
                       </Button>
+                    ) : (
+                      <></>
+                    )}
                   </Flex>
                 </GridItem>
               ))}
@@ -126,7 +165,7 @@ export default function ModalModifyImages(props) {
                     type={"file"}
                     height={"100%"}
                     accept={"image/png, image/jpeg, image/webp"}
-                    onChange={({ target }) => {
+                    onInput={({ target }) => {
                       const file = target.files[0];
                       const extension = file.name.split(".").pop();
                       const newFile = new File(
@@ -137,10 +176,6 @@ export default function ModalModifyImages(props) {
                         }
                       );
                       uploadImage(newFile);
-                      setlistImage([
-                        ...listImage,
-                        URL.createObjectURL(newFile),
-                      ]);
                     }}
                   ></Input>
                 </GridItem>

src/pages/api/file/deleteFile.js

@@ -0,0 +1,19 @@
+const fs = require("fs");
+
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: "1mb",
+    },
+  },
+};
+
+const deleteImage = async (req, res) => {
+  const body = await JSON.parse(req.body);
+  await fs.unlinkSync(`./public/imageUsers/${body.fileName}`);
+  res.status(200).send("image deleted");
+};
+
+export default (req, res) => {
+  req.method === "DELETE" ? deleteImage(req, res) : res.status(404).send("");
+};

src/pages/api/file/file.js

@@ -1,45 +0,0 @@
-import fs from "fs";
-import formidable from "formidable";
-
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-};
-
-const post = async (req, res) => {
-  const form = new formidable.IncomingForm({
-    maxFileSize: 5 * 1024 * 1024,
-    uploadDir: "./public/imageUsers",
-    keepExtensions: true,
-  });
-  form.parse(req, async function (err, fields, files) {
-    saveFile(files.file);
-    return res.status(201).send("image saved");
-  });
-};
-
-const saveFile = async (file) => {
-  const data = fs.readFileSync(file.path);
-  fs.writeFileSync(`./public/imageUsers/${file.name}`, data);
-  await fs.unlinkSync(file.path);
-  return;
-};
-
-const deleteImage = async (req, res) => {
-  const body = req.body;
-  await fs.unlinkSync(`./public/imageUsers/${body.name}`);
-  res.status(200).send("image deleted");
-};
-
-export default (req, res) => {
-  req.method === "POST"
-    ? post(req, res)
-    : req.method === "PUT"
-    ? console.log("PUT")
-    : req.method === "DELETE"
-    ? deleteImage(req, res)
-    : req.method === "GET"
-    ? console.log("GET")
-    : res.status(404).send("");
-};

src/pages/api/file/uploadFile.js

@@ -0,0 +1,37 @@
+const fs = require("fs");
+import formidable from "formidable";
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+const post = async (req, res) => {
+  const form = new formidable.IncomingForm({
+    maxFileSize: 5 * 1024 * 1024,
+    uploadDir: "./public/imageUsers",
+    keepExtensions: true,
+  });
+  form.parse(req, async function (err, fields, files) {
+    if (err) {
+      res.status(500).json({ error: err });
+      res.end();
+      return;
+    }
+    saveFile(files.file);
+    return res.status(201).send("image saved");
+  });
+};
+
+const saveFile = async (file) => {
+  const newPath = `./public/imageUsers/${file.newFilename}`; //nom donnée par formidable (pas utile ici)
+  const finalPath = `./public/imageUsers/${file.originalFilename}`; //nom avec l'id de l'utilisateur
+  const data = await fs.readFileSync(newPath);
+  fs.writeFileSync(finalPath, data);
+  await fs.unlinkSync(newPath);
+  return;
+};
+export default (req, res) => {
+  req.method === "POST" ? post(req, res) : res.status(404).send("");
+};

src/pages/userProfile.tsx

@@ -38,7 +38,6 @@ export default function UserProfile() {
   const { handleSubmit, control } = useForm();
 
   const [userData, setUserData] = useState({});
-  const [files, setFiles] = useState([]);
 
   const { data: session, status } = useSession();
   if (status === "unauthenticated") router.push("/login");
@@ -86,13 +85,14 @@ export default function UserProfile() {
             });
             // router.reload();
           })
-          .catch(() => {
+          .catch((err) => {
             setIsLoading(false);
             toast({
               title: `Erreur lors de l'envoi des modifications`,
               status: "error",
               isClosable: true,
             });
+            console.log(err);
           });
       }
     };
@@ -124,8 +124,6 @@ export default function UserProfile() {
                 userData={userData}
                 user={user}
                 images={user.images}
-                files={files}
-                setFiles={setFiles}
               />
             ) : (
               <ModalModifyImages
@@ -133,8 +131,6 @@ export default function UserProfile() {
                 userData={userData}
                 user={user}
                 images={userData.images}
-                files={files}
-                setFiles={setFiles}
               />
             )}