diff --git a/src/pages/Compte.js b/src/pages/Compte.js
index 3ac2607..12fc9cd 100644
--- a/src/pages/Compte.js
+++ b/src/pages/Compte.js
@@ -2,6 +2,7 @@ import React from 'react';
import NavigationDashboard from '../components/NavigationDashboard';
+
const Compte = () => {
return (
@@ -27,9 +28,9 @@ const Compte = () => {
-
![]()
+
-
+
@@ -75,8 +76,34 @@ const Compte = () => {
+
);
};
+let fileUpload = document.getElementById("fileUpload");
+let display_image = document.getElementById("display_image");
+
+preview();
+
+function preview(){
+ display_image.innerHTML = "";
+
+ for(fileUpload of fileUpload.files){
+ let reader = new FileReader();
+ let figure = document.createElement("figure");
+ let figCap = document.createElement("figcaption");
+ figCap.innerText = fileUpload.name;
+ figure.appendChild(figCap);
+ reader.onload=()=>{
+ let img = document.createElement("img");
+ img.setAttribute("src", reader.result);
+ figure.insertBefore(img,figCap);
+ }
+ display_image.appendChild(figure);
+ reader.readAsDataURL(fileUpload);
+ }
+}
+
+
export default Compte;
\ No newline at end of file
diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss
index 9f6cd4c..1dee73e 100644
--- a/src/styles/components/_compte.scss
+++ b/src/styles/components/_compte.scss
@@ -162,11 +162,26 @@ body {
margin-left: 25px;
border-bottom: 1px solid grey;
- .photo_profil {
+ #display_image {
display: flex;
+ margin-bottom: 5px;
height: 135px;
width: 135px;
+ 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);
}
+
+ .figure{
+ width: 45%;
+ }
+
+ .img{
+ width: 100%;
+ }
+
.bouton_submit {
display: flex;
@@ -231,6 +246,7 @@ body {
}
}
+
.infoPerso {
display: flex;
flex-direction: column;