Ajout image base de données pas ok

server-api/api.js

@@ -319,6 +319,18 @@ app.put('/User/Update/:id', (req, res) => {
     });
 });
 
+app.put('/User/Update/Image/:id', (req, res) => {
+    const id = req.params.id;
+    let form = req.body;
+
+    const sql = `UPDATE users SET image = ? WHERE (iduser = ?)`;
+    db.query(sql, [form.image, id], (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send('Post image update...');
+    });
+});
+
 app.put('/User/Update/Password/:id', (req, res) => {
 
     const id = req.params.id;

src/pages/Compte.js

@@ -5,6 +5,7 @@ import NavigationDashboard from '../components/NavigationDashboard';
 import img1 from '../img/logo_personEntouré.svg';
 import axios from 'axios'
 import Session from 'react-session-api';
+import { render } from '@testing-library/react';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -15,7 +16,12 @@ function Compte() {
     const nomInputRef = useRef();
     const prenomInputRef = useRef();
     const [modification, setModification] = useState(false);
-    const convert2base64 = e => {
+    const [imageBase64, setImageBase64] = useState("");
+    const [selectedFile, setSelectedFile] = useState([]);
+    const [fileBase64String, setFileBase64String] = useState("");
+
+
+    const convert2base64 = (e) => {
         const file = e.target.files[0];
         const reader = new FileReader();
 
@@ -24,17 +30,43 @@ function Compte() {
         }
 
         reader.readAsDataURL(file);
+
+        encodeFileBase64(file);
+
+        setSelectedFile(e.target.files);
+        console.log(e.target.files[0])
+        console.log(e.target.files[0].name);
+        console.log(e.target.files[0].size);
+        console.log(e.target.files[0].type);
     };
 
+    const encodeFileBase64 = (file) => {
+        var reader = new FileReader();
+        if(file) {
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                var Base64 = reader.result;
+                console.log("Base64 : " + Base64);
+                setFileBase64String(Base64);
+            };
+            reader.onerror = (error) => {
+                console.log('Error: ', error);
+            };
+        }
+    }
+
+    // encodeFileBase64(selectedFile[0]);
+
+
+
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
         setTheme(localStorage.getItem("theme"))
     }
 
-    const [file, setFile] = useState();
+    /*const [file, setFile] = useState();
     function handleChange(e) {
-        console.log(e.target.files);
         setFile(URL.createObjectURL(e.target.files[0]));
-    }
+    }*/
 
     const modificationHandler = () => {
         setModification((modification) => !modification)
@@ -46,6 +78,8 @@ function Compte() {
     const [phone, setPhone] = useState("");
     const [mail, setMail] = useState("");
     const [image, setImage] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
 
     useEffect(() => {
         const apiString = '/User/Id/' + Session.get("idUser");
@@ -58,17 +92,26 @@ function Compte() {
         });
     }, []);
 
-    const handleImageAdding = (e) => {
-        const bdd = { image };
-
-        fetch('http://localhost:8080', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(bdd)
-        })
-            .then(() => {
-                console.log('Image ajoutée');
-            })
+    const handleAddingImage = e => {
+        console.log("handleAddingImage");
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        
+        const formData = new FormData(convert2base64(e));
+        formData.append('image', image);
+
+        console.log("formData : " + formData);
+
+        api.put('User/Update/Image/'+Session.get("idUser"), formData).then(response => {
+            console.log(response.data)
+        // Traitez la réponse du serveur
+        setLoading(false);
+        }).catch(error => {
+        // Traitez l'erreur
+        setLoading(false);
+        setError(error);
+        });
     }
 
     function handleChangeLastName(event) {
@@ -112,8 +155,8 @@ function Compte() {
                         <div className="name_picture">
                             <div className="picture">
                                 <div id="display_image">
-                                    <img src={img1} srcSet={image} id="img" className="img" />
-                                    <div> <input id="fileUpload" type="file" onChange={e => { convert2base64(e); handleChange(e); handleImageAdding() }}></input></div>
+                                    <img src={image === "" ? img1 : image} id="img" className="img" />
+                                    <div> <input id="fileUpload" type="file" onChange={handleAddingImage}></input></div>
                                 </div>
                                 <label className="fileUpload" htmlFor="fileUpload">Ajoutez votre photo</label>
                             </div>

src/styles/components/_compte.scss

@@ -190,11 +190,11 @@ body {
             }
         }
     }
-        }
+}
 
 
 
-                        /*.bouton_submit {
+.bouton_submit {
     display: flex;
     margin-left: 30px;
     align-items: center;
@@ -239,10 +239,10 @@ body {
             border-color: #3874ff;
         }
     }
-                    }
-                }
+}
 
-                .name {
+
+.name {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -288,11 +288,11 @@ body {
             }
         }
     }
-                }
-            }
+}
+
 
 
-            .infoPerso {
+.infoPerso {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -366,9 +366,9 @@ body {
             margin-left: 207px;
         }
     }
-            }
+}
 
-            .infoEntreprise {
+.infoEntreprise {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
@@ -441,11 +441,9 @@ body {
             margin-left: 115px;
         }
     }
-            }
-        }
-    }
 }
 
+
 #fileUpload[type="file"] {
     display: none;
 }
@@ -466,4 +464,3 @@ body {
     background-color: $xiketic;
     cursor: pointer;
 }
-}