lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-05-13 17:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Laurian-Dufrechou
2023-03-31 01:28:22 +02:00
parent 03cb13030e
commit ae33f29c94
5 changed files with 134 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ModalModifyImages.jsx
+76 -41
View File
@@ -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) {
<GridItem key={index}>
<Flex direction={"column"} gap={"1rem"}>
<Image src={image} />
<Button
id={"" + index}
colorScheme={"red"}
onClick={(e) => {
setlistImage(listImage.filter((_, i) => i !== index));
setFiles(files.filter((_, i) => i !== index));
}}
>
Supprimer l'image
</Button>
{index === listImage.length - 1 ? (
<Button
id={"" + index}
colorScheme={"red"}
onClick={(e) => {
deleteImage(`${listImage[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
+19
View File
@@ -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
-45
View File
@@ -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
+37
View File
@@ -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
+2 -6
View File
@@ -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}
/>
)}