Input image userProfile

src/components/ModalModifyImages.jsx

@@ -12,13 +12,17 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Text,
   useDisclosure,
 } from "@chakra-ui/react";
+import { useState } from "react";
 import { RiEditBoxLine } from "react-icons/ri";
 
 export default function ModalModifyImages(props) {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { images, userData, setUserData } = props;
+  const { images, userData, setUserData, files, setFiles } = props;
+  const [listImage, setlistImage] = useState(images);
+
   return (
     <>
       <Button
@@ -41,20 +45,21 @@ export default function ModalModifyImages(props) {
           <ModalHeader>Modification des images</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <Grid templateColumns={`repeat(${images.length + 1}, 1fr)`} gap={5}>
-              {images.map((image, index) => (
+            <Grid
+              templateColumns={`repeat(${listImage.length + 1}, 1fr)`}
+              gap={5}
+            >
+              {listImage.map((image, index) => (
                 <GridItem key={index}>
+                  <Text>{image}</Text>
                   <Flex direction={"column"} gap={"1rem"}>
                     <Image src={image} />
                     <Button
                       id={"" + index}
                       colorScheme={"red"}
                       onClick={(e) => {
-                        images.splice(index, 1);
-                        setUserData({
-                          ...userData,
-                          images: [...images],
-                        });
+                        setlistImage(listImage.filter((_, i) => i !== index));
+                        setFiles(files.filter((_, i) => i !== index));
                       }}
                     >
                       Supprimer l'image
@@ -62,17 +67,16 @@ export default function ModalModifyImages(props) {
                   </Flex>
                 </GridItem>
               ))}
-              {images.length < 5 ? (
+              {listImage.length < 5 ? (
                 <GridItem width={"100%"}>
                   <Input
                     type={"file"}
                     height={"100%"}
                     accept={"image/png, image/jpeg, image/webp"}
-                    onChange={(e) => {
-                      setUserData({
-                        ...userData,
-                        images: [...images, e.target.files[0].name],
-                      });
+                    onChange={({ target }) => {
+                      const file = target.files[0];
+                      setlistImage([...listImage, URL.createObjectURL(file)]);
+                      setFiles([...files, file]);
                     }}
                   ></Input>
                 </GridItem>
@@ -83,7 +87,17 @@ export default function ModalModifyImages(props) {
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme="purple" mr={3} onClick={onClose}>
+            <Button
+              colorScheme="purple"
+              mr={3}
+              onClick={(e) => {
+                setUserData({
+                  ...userData,
+                  images: [...listImage],
+                });
+                onClose();
+              }}
+            >
               Save
             </Button>
           </ModalFooter>

src/pages/api/file/file.js

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

src/pages/userProfile.tsx

@@ -28,13 +28,12 @@ import { useState } from "react";
 export default function UserProfile() {
   const router = useRouter();
   const toast = useToast();
-  const { data: session, status } = useSession();
   const [isLoading, setIsLoading] = useState(false);
-  const { isOpen, onOpen, onClose } = useDisclosure();
 
-  // faire un model avec toutes les infos de user
   const [userData, setUserData] = useState({});
+  const [files, setFiles] = useState([]);
 
+  const { data: session, status } = useSession();
   if (status === "unauthenticated") router.push("/login");
 
   if (status === "authenticated") {
@@ -49,6 +48,37 @@ export default function UserProfile() {
 
       setIsLoading(true);
 
+      // if (files.length > 0) {
+      //   files.forEach((file) => {
+      //     const body = new FormData();
+      //     body.append("file", file);
+      //     const imagePostOptions = {
+      //       method: "POST",
+      //       headers: { "Content-Type": "application/json" },
+      //       body,
+      //     };
+
+      //     fetch(`/api/file/file`, imagePostOptions)
+      //       .then((res) => {
+      //         console.log(res);
+      //         setIsLoading(false);
+      //         toast({
+      //           title: `Ajout d'image effectué`,
+      //           status: "success",
+      //           isClosable: true,
+      //         });
+      //       })
+      //       .catch(() => {
+      //         setIsLoading(false);
+      //         toast({
+      //           title: `Erreur lors de l'envoi des images`,
+      //           status: "error",
+      //           isClosable: true,
+      //         });
+      //       });
+      //   });
+      // }
+
       fetch(`/api/users/${user.id}`, options)
         .then(() => {
           setIsLoading(false);
@@ -57,7 +87,7 @@ export default function UserProfile() {
             status: "success",
             isClosable: true,
           });
-          router.reload();
+          // router.reload();
         })
         .catch(() => {
           setIsLoading(false);
@@ -94,7 +124,14 @@ export default function UserProfile() {
         >
           <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
             <Box width={"50%"}>
-              <Carousel images={user.images} borderRadius={"1rem"}></Carousel>
+              {userData.images ? (
+                <Carousel
+                  images={userData.images}
+                  borderRadius={"1rem"}
+                ></Carousel>
+              ) : (
+                <Carousel images={user.images} borderRadius={"1rem"}></Carousel>
+              )}
             </Box>
             {/* {modal} */}
             {!userData.images ? (
@@ -102,12 +139,16 @@ export default function UserProfile() {
                 setUserData={setUserData}
                 userData={userData}
                 images={user.images}
+                files={files}
+                setFiles={setFiles}
               />
             ) : (
               <ModalModifyImages
                 setUserData={setUserData}
                 userData={userData}
                 images={userData.images}
+                files={files}
+                setFiles={setFiles}
               />
             )}
             <Divider />
@@ -196,6 +237,7 @@ export default function UserProfile() {
                   <EditableTextarea />
                 </Editable>
               </Flex>
+              {/* préférences / sexe / type de relation recherchés */}
             </Box>
             <BottomBar variant={"fixed"} saveData={saveData} />
           </Flex>