From 163865d27da1e893094beff875e5320570c0a9ad Mon Sep 17 00:00:00 2001 From: Theo DUPIN Date: Mon, 14 Nov 2022 18:32:25 +0100 Subject: [PATCH] =?UTF-8?q?=C3=A9v=C3=A8nement=20bouton=20ajouter=20photo?= =?UTF-8?q?=20page=20Compte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Compte.js | 31 ++++++++++++++++++++++++++++-- src/styles/components/_compte.scss | 18 ++++++++++++++++- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/src/pages/Compte.js b/src/pages/Compte.js index e6674d7..54d85fd 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 d9177a7..0ba15bb 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; @@ -232,6 +247,7 @@ body { } } + .infoPerso { display: flex; flex-direction: column;