Merge branch 'master' of https://codefirst.iut.uca.fr/git/maxence.lanone/JTT_CrM

3 years ago · afbec0be83
parent 04a6578372 7cfc99375a
commit afbec0be83
2 changed files with 46 additions and 3 deletions
--- 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 (
        <body>
@ -27,9 +28,9 @@ const Compte = () => {
                    <div className="Compte">
                        <div className="name_picture">
                            <div className="picture">
-                                <img className="photo_profil" srcSet="./logo_personEntouré.svg"/>
+                                <div id="display_image"></div>
                                <div className='bouton_submit'>
-                                    <button className="bouton_ajoutPhoto" type="submit">Ajouter une photo</button>
+                                    <input type="file" name="fileUpload" id="fileUpload"/>
                                </div>
                            </div>
                            <div className="name">
@ -75,8 +76,34 @@ const Compte = () => {
                    </div>
                </div>
            </div>
+            <script src="Compte.js" defer></script>
        </body>
    );
 };

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