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;