From ae33f29c940ae57921d03bd04a81db5b84570ab1 Mon Sep 17 00:00:00 2001 From: Laurian-Dufrechou Date: Fri, 31 Mar 2023 01:28:22 +0200 Subject: [PATCH] feat(Delete image in folder + db ): delete in folder + db, add in folder + db --- src/components/ModalModifyImages.jsx | 117 +++++++++++++++++---------- src/pages/api/file/deleteFile.js | 19 +++++ src/pages/api/file/file.js | 45 ----------- src/pages/api/file/uploadFile.js | 37 +++++++++ src/pages/userProfile.tsx | 8 +- 5 files changed, 134 insertions(+), 92 deletions(-) create mode 100644 src/pages/api/file/deleteFile.js delete mode 100644 src/pages/api/file/file.js create mode 100644 src/pages/api/file/uploadFile.js diff --git a/src/components/ModalModifyImages.jsx b/src/components/ModalModifyImages.jsx index 366f00c..ec3341a 100644 --- a/src/components/ModalModifyImages.jsx +++ b/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) => { - console.log(res); - toast({ - title: `Ajout d'image effectué`, - status: "success", - isClosable: true, - }); + fetch(`/api/users/${user.id}`, imagePatchOptions) + .then((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,28 +72,45 @@ export default function ModalModifyImages(props) { }; const deleteImage = async (fileName) => { - const body = new FormData(); - body.append("fileName", fileName); + let newListImage = listImage; + 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) - .then((res) => { - console.log(res); - Toast({ - title: `Suppression d'image effectué`, - status: "success", - isClosable: true, + 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) => { + toast({ + title: `Suppression d'image effectué`, + status: "success", + isClosable: true, + }); + }) + .catch(() => { + toast({ + title: `Erreur lors de la suppression des images`, + status: "error", + isClosable: true, + }); }); - }) - .catch(() => { - toast({ - title: `Erreur lors de la suppression des images`, - status: "error", - isClosable: true, - }); - }); + }); }; return ( @@ -107,16 +143,19 @@ export default function ModalModifyImages(props) { - + {index === listImage.length - 1 ? ( + + ) : ( + <> + )} ))} @@ -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), - ]); }} > diff --git a/src/pages/api/file/deleteFile.js b/src/pages/api/file/deleteFile.js new file mode 100644 index 0000000..5d6af83 --- /dev/null +++ b/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(""); +}; diff --git a/src/pages/api/file/file.js b/src/pages/api/file/file.js deleted file mode 100644 index 17a563b..0000000 --- a/src/pages/api/file/file.js +++ /dev/null @@ -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(""); -}; diff --git a/src/pages/api/file/uploadFile.js b/src/pages/api/file/uploadFile.js new file mode 100644 index 0000000..c96648d --- /dev/null +++ b/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(""); +}; diff --git a/src/pages/userProfile.tsx b/src/pages/userProfile.tsx index ed7fc87..55c2cf5 100644 --- a/src/pages/userProfile.tsx +++ b/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} /> ) : ( )}