maxence.lanone
/
JTT_CrM_test_ci
forked from CRM_Production/JTT_CrM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout image base de données pas ok

Browse Source
master
Théo DUPIN 2 years ago
parent c6a7649b9f
commit afbf9f0bea
3 changed files with 410 additions and 358 deletions
Show Stats Download Patch File Download Diff File

12
server-api/api.js
Unescape View File

@ -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;

77
src/pages/Compte.js
Unescape View File

@ -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>

679
src/styles/components/_compte.scss
Unescape View File

@ -45,407 +45,405 @@ body {
}
.bas_de_page {
.bas_de_page {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
.nav_bar_verticale {
display: flex;
flex-direction: row;
justify-content: space-between;
width: auto;
height: 86%;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 5%;
margin: 5px 5px 10px 10px;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.nav_bar_verticale {
.parti_one {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.parti_two {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 5%;
margin: 5px 5px 10px 10px;
width: 100%;
height: 35%;
}
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
.parti_three {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 15px;
width: 100%;
height: 18%;
}
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.parti_four {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.parti_one {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.button {
display: flex;
object-fit: cover;
background-color: transparent;
border: none;
cursor: pointer;
.parti_two {
.logo_nav_bar {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 35%;
margin: 10px;
height: 50px;
width: 50px;
}
}
}
}
.parti_three {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-top: 15px;
width: 100%;
height: 18%;
}
.parti_four {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
height: 18%;
}
.button {
display: flex;
object-fit: cover;
background-color: transparent;
border: none;
cursor: pointer;
.logo_nav_bar {
display: flex;
margin: 10px;
height: 50px;
width: 50px;
}
}
}
}
.Compte {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.Compte {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
.name_picture {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 1);
border: 1px solid #cbd0dd;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
border-radius: 5px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.picture {
display: flex;
flex-direction: row;
justify-content: left;
margin-right: 25px;
margin-left: 25px;
border-bottom: 1px solid grey;
.name_picture {
#display_image {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
margin-bottom: 5px;
height: 135px;
width: 135px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
border: 1px solid #cbd0dd;
border-radius: 100px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.picture {
display: flex;
flex-direction: row;
justify-content: left;
margin-right: 25px;
margin-left: 25px;
border-bottom: 1px solid grey;
#display_image {
display: flex;
margin-bottom: 5px;
height: 135px;
width: 135px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid #cbd0dd;
border-radius: 100px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.img {
border-radius: 100px;
object-fit: cover;
}
}
.img {
border-radius: 100px;
object-fit: cover;
}
}
}
.figure {
width: 45%;
}
.figure {
width: 45%;
}
.img {
width: 100%;
}
}
.img {
width: 100%;
}
}
}
}
/*.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
.fileUpload {
color: #3874ff;
border-color: #3874ff;
background-color: transparent;
border: 1px solid #004dff;
border-radius: .375rem;
gap: 1rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
&:hover {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
}
&:focus {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
}
&:active {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
&:disabled {
color: #3874ff;
background-color: transparent;
border-color: #3874ff;
}
}
}
}
.bouton_submit {
display: flex;
margin-left: 30px;
align-items: center;
cursor: pointer;
.name {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 25px;
.presentationNom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
.def {
display: flex;
font-weight: bold;
}
.nom {
display: flex;
margin-left: 125px;
;
}
.texte {
display: flex;
flex-wrap: wrap;
margin-left: 125px;
}
}
.bouton_submit {
display: flex;
.bouton_modifierNom {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
&:hover {
background-color: lightgrey;
}
}
}
}
}
.fileUpload {
color: #3874ff;
border-color: #3874ff;
background-color: transparent;
border: 1px solid #004dff;
border-radius: .375rem;
gap: 1rem;
font-size: 1rem;
line-height: 1.5;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
.infoPerso {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-left: 13px;
margin-right: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
&:hover {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
}
.parti_mail {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
&:focus {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
}
.mail {
display: flex;
margin-left: 199px;
}
}
&:active {
color: #fff;
background-color: #3874ff;
border-color: #004dff;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
}
.parti_pays {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
&:disabled {
color: #3874ff;
background-color: transparent;
border-color: #3874ff;
}
}
}
.pays_region {
display: flex;
margin-left: 110px;
}
}
.parti_tel {
display: flex;
flex-direction: row;
margin: 0 25px;
.name {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 25px;
.def {
display: flex;
font-weight: bold;
}
.presentationNom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
.tel {
display: flex;
margin-left: 207px;
}
}
.def {
display: flex;
font-weight: bold;
}
.nom {
display: flex;
margin-left: 125px;
;
}
.texte {
display: flex;
flex-wrap: wrap;
margin-left: 125px;
}
}
.bouton_submit {
display: flex;
.bouton_modifierNom {
width: 75px;
height: 20px;
background-color: rgb(190, 189, 189);
border-radius: 5px;
border-radius: 5px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
cursor: pointer;
&:hover {
background-color: lightgrey;
}
}
}
}
.infoEntreprise {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
.parti_name {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.name {
display: flex;
margin-left: 92px;
}
}
.infoPerso {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-left: 13px;
margin-right: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
.parti_secteurAct {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.parti_mail {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.secteurAct {
display: flex;
margin-left: 98px;
}
}
.def {
display: flex;
font-weight: bold;
}
.parti_nbClient {
display: flex;
flex-direction: row;
margin: 0 25px;
.mail {
display: flex;
margin-left: 199px;
}
}
.def {
display: flex;
font-weight: bold;
}
.parti_pays {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.nbClient {
display: flex;
margin-left: 115px;
}
}
}
.def {
display: flex;
font-weight: bold;
}
.pays_region {
display: flex;
margin-left: 110px;
}
}
.parti_tel {
display: flex;
flex-direction: row;
margin: 0 25px;
.def {
display: flex;
font-weight: bold;
}
.tel {
display: flex;
margin-left: 207px;
}
}
}
.infoEntreprise {
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin: 13px;
width: auto;
height: 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(15px);
.description {
display: flex;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 10px 0;
font-weight: bold;
}
.parti_name {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.name {
display: flex;
margin-left: 92px;
}
}
.parti_secteurAct {
display: flex;
flex-direction: row;
margin: 0 25px;
border-bottom: 1px solid grey;
padding: 0 0 15px 0;
.def {
display: flex;
font-weight: bold;
}
.secteurAct {
display: flex;
margin-left: 98px;
}
}
.parti_nbClient {
display: flex;
flex-direction: row;
margin: 0 25px;
.def {
display: flex;
font-weight: bold;
}
.nbClient {
display: flex;
margin-left: 115px;
}
}
}
#fileUpload[type="file"] {
display: none;
}
@ -465,5 +463,4 @@ body {
border-radius: 10px;
background-color: $xiketic;
cursor: pointer;
}
}
Write Preview
Loading…
Cancel
Save