page compte

package-lock.json

@@ -19,6 +19,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "addeventlistener": "^2.0.0",
         "axios": "^1.1.3",
         "chart": "^0.1.2",
         "chart.js": "^3.9.1",
@@ -5156,6 +5157,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/addeventlistener": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/addeventlistener/-/addeventlistener-2.0.0.tgz",
+      "integrity": "sha512-kUFKM5RAAGzcI4FGK5wsmR/K1+RotvLpwDLqBUtVR147u0y1JNyLxVIjrCODPydFbJA/kk/cTWvjL4PVpdA5WA==",
+      "dependencies": {
+        "event-listener-with-options": "^1.0.3"
+      }
+    },
     "node_modules/address": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/address/-/address-1.2.1.tgz",
@@ -8216,6 +8225,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-listener-with-options": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/event-listener-with-options/-/event-listener-with-options-1.1.0.tgz",
+      "integrity": "sha512-5CBIXSXRgo3Sf5/jW4BujZgDLkLvg93Vx3JefQs0UKOQoyKnp1pg6VoKYm4eQxi6KW3B3ghvN+gWSvIGT5tXbg=="
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -21447,6 +21461,14 @@
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
       "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA=="
     },
+    "addeventlistener": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/addeventlistener/-/addeventlistener-2.0.0.tgz",
+      "integrity": "sha512-kUFKM5RAAGzcI4FGK5wsmR/K1+RotvLpwDLqBUtVR147u0y1JNyLxVIjrCODPydFbJA/kk/cTWvjL4PVpdA5WA==",
+      "requires": {
+        "event-listener-with-options": "^1.0.3"
+      }
+    },
     "address": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/address/-/address-1.2.1.tgz",
@@ -23670,6 +23692,11 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
+    "event-listener-with-options": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/event-listener-with-options/-/event-listener-with-options-1.1.0.tgz",
+      "integrity": "sha512-5CBIXSXRgo3Sf5/jW4BujZgDLkLvg93Vx3JefQs0UKOQoyKnp1pg6VoKYm4eQxi6KW3B3ghvN+gWSvIGT5tXbg=="
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",

package.json

@@ -14,6 +14,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "addeventlistener": "^2.0.0",
     "axios": "^1.1.3",
     "chart": "^0.1.2",
     "chart.js": "^3.9.1",

src/pages/Compte.js

@@ -1,3 +1,5 @@
+import { Component } from '@fullcalendar/core';
+import { render } from '@testing-library/react';
 import { click } from '@testing-library/user-event/dist/click';
 import React from 'react';
 import NavigationDashboard from '../components/NavigationDashboard';
@@ -16,12 +18,12 @@ const Compte = () => {
                     <h2 className="titre">Mon Compte</h2>
                     <div className="rechLogo">
                         <div className="input_box">
-                            <input type="search" placeholder="Rechercher..."/>
+                            <input type="search" placeholder="Rechercher..." />
                             <span className="search">
                                 <i class="uil uil-search search-icon"></i>
                             </span>
                         </div>
-                        <img className="logo" srcSet="./LogoApp.svg"/>
+                        <img className="logo" srcSet="./LogoApp.svg" />
                     </div>
                 </div>
                 <div className="bas_de_page">
@@ -31,7 +33,7 @@ const Compte = () => {
                             <div className="picture">
                                 <div id="display_image"></div>
                                 <div className='bouton_submit'>
-                                    <input type="file" name="fileUpload" id="fileUpload"/>
+                                    <input type="file" name="fileUpload" id="fileUpload" accept="image/*"/>
                                 </div>
                             </div>
                             <div className="name">
@@ -79,30 +81,8 @@ const Compte = () => {
             </div>
         </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;