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}
/>
) : (
)}