templates/import_export/import-files.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .mbody {
  3.         display: flex;
  4.         align-items: center;
  5.         justify-content: center;
  6.         background: #B13403;
  7.     }
  8.     .drag-area-page {
  9.         border: 2px dashed #fff;
  10.         height: 400px;
  11.         width: 700px;
  12.         border-radius: 5px;
  13.         display: flex;
  14.         align-items: center;
  15.         justify-content: center;
  16.         flex-direction: column;
  17.     }
  18.     .drag-area-page.active {
  19.         border: 2px solid #fff;
  20.     }
  21.     .drag-area-page .icon {
  22.         font-size: 100px;
  23.         color: #fff;
  24.     }
  25.     .drag-area-page header {
  26.         font-size: 24px;
  27.         font-weight: 500;
  28.         color: #fff;
  29.     }
  30.     .drag-area-page span {
  31.         font-size: 22px;
  32.         font-weight: 500;
  33.         color: #fff;
  34.         margin: 10px 0 15px;
  35.     }
  36.     .drag-area-page button {
  37.         padding: 10px 25px;
  38.         font-size: 20px;
  39.         font-weight: 500;
  40.         border: none;
  41.         outline: none;
  42.         background: #fff;
  43.         color: #5256ad;
  44.         border-radius: 5px;
  45.         cursor: pointer;
  46.     }
  47.     .drag-area-page img {
  48.         height: 100%;
  49.         width: 100%;
  50.         object-fit: cover;
  51.         border-radius: 5px;
  52.     }
  53. </style>
  55. <div class="modal fade" id="{{ modal }}" tabindex="-1" aria-labelledby="pageModalLabel" aria-hidden="true">
  56.     <div class="modal-dialog modal-dialog-centered">
  57.         <div class="modal-content">
  58.             <div class="modal-header">
  59.                 <h5 class="modal-title" id="pageModalLabel">Importer fichier CSV</h5>
  60.                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  61.             </div>
  62.             <form action="{{ path }}" method="POST" id="mform_id" onsubmit="return mySubmitFunction{{modal}}(event)">
  63.                 <div class="modal-body mbody" style="max-height: 48rem;">
  64.                     <div class="drag-area-page">
  65.                         <div class="icon">
  66.                             <i class="fas fa-cloud-upload-alt"></i>
  67.                         </div>
  68.                         <header>Drag & Drop pour télécharger le fichier</header>
  69.                         <span>OU</span>
  70.                         <button type="button">Parcourir le Fichier</button>
  71.                         <input type="file" name="fileToUpload" id="fileToUpload" accept="text/csv" multiple hidden>
  72.                     </div>
  73.                 </div>
  74.                 <div class="modal-footer modal-footer-page">
  75.                     <input type="text" name="mfileToUpload" id="mfileToUpload" hidden>
  76.                     <input type="text" name="mfileNameToUpload" id="mfileNameToUpload" hidden>
  77.                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
  78.                     <button type="submit" class="btn btn-primary" onclick="return mySubmitFunctionbtn{{modal}}(event)">Importer</button>
  79.                 </div>
  80.             </form>
  81.         </div>
  82.     </div>
  83. </div>
  86. <script>
  87.     let submit{{modal}} = false;
  88.     let mdocument{{modal}} = document.querySelector("#{{modal}}");
  89.     // selecting all required elements
  90.     let modalf{{modal}} = mdocument{{modal}}.querySelector(".modal-footer-page"),
  91.         minput{{modal}} = modalf{{modal}}.querySelector("input"),
  92.         mnameinput{{modal}} = modalf{{modal}}.querySelector("#mfileNameToUpload");
  93.     let dropArea{{modal}} = mdocument{{modal}}.querySelector(".drag-area-page"),
  94.         dragText{{modal}} = dropArea{{modal}}.querySelector("header"),
  95.         button{{modal}} = dropArea{{modal}}.querySelector("button"),
  96.         input{{modal}} = dropArea{{modal}}.querySelector("input");
  97.     let file{{modal}}; // this is a global variable and we'll use it inside multiple functions
  99.     button{{modal}}.onclick = () => {
  100.         input{{modal}}.click(); // if user click on the button then the input also clicked
  101.     };
  102.     input{{modal}}.addEventListener("change", function () { // getting user select file and [0] this means if user select multiple files then we'll select only the first one
  103.         file{{modal}} = this.files;
  104.         dropArea{{modal}}.classList.add("active");
  106.         // file.forEach(showFile);
  107.         showFile{{modal}}(); // calling function
  108.     });
  110.     // If user Drag File Over DropArea
  111.     dropArea{{modal}}.addEventListener("dragover", (event) => {
  112.         event.preventDefault(); // preventing from default behaviour
  113.         dropArea{{modal}}.classList.add("active");
  114.         dragText{{modal}}.textContent = "Libérer pour télécharger le fichier";
  115.     });
  117.     // If user leave dragged File from DropArea
  118.     dropArea{{modal}}.addEventListener("dragleave", () => {
  119.         dropArea{{modal}}.classList.remove("active");
  120.         dragText{{modal}}.textContent = "Drag & Drop pour télécharger le fichier";
  121.     });
  123.     // If user drop File on DropArea
  124.     dropArea{{modal}}.addEventListener("drop", (event) => {
  125.         event.preventDefault();
  126.         // preventing from default behaviour
  127.         // getting user select file and [0] this means if user select multiple files then we'll select only the first one
  128.         file{{modal}} = event.dataTransfer.files;
  129.         input{{modal}}.files = event.dataTransfer.files;
  131.         // file.forEach(showFile);
  132.         showFile{{modal}}(); // calling function
  133.     });
  135.     function showFile{{modal}}() {
  136.         minput{{modal}}.value = [];
  137.         mnameinput{{modal}}.value = [];
  138.         dragText{{modal}}.innerHTML = '';
  139.         for (let index = 0; index < file{{modal}}.length; index++) {
  140.             // const element = file[index];
  141.             // console.log(file[index]);
  142.             let fileType = file{{modal}}[index].type;
  143.             // getting selected file type
  144.             // let fileURL = fileReader.result;
  146.             let validExtensions = ["text/csv", "application/vnd.ms-excel"]; // adding some valid image extensions in array
  147.             if (validExtensions.includes(fileType)) { // if user selected file is an image file
  148.                 let fileReader = new FileReader(); // creating new FileReader object
  149.                 fileReader.onload = () => {
  150.                     let fileURL = fileReader.result;
  151.                     let imgTag = `Fichier déposé avec succès  <br>`;
  152.                     filename = file{{modal}}[index].name;
  153.                     dragText{{modal}}.innerHTML += filename + ' , ';
  154.                     minput{{modal}}.value += "|[|" + fileURL;
  155.                     mnameinput{{modal}}.value += "|[|" + filename;
  156.                 };
  157.                 fileReader.readAsDataURL(file{{modal}}[index]);
  159.                 // submit = true;
  160.             } else {
  161.                 alert("Ceci n'est pas un fichier CSV!");
  162.                 alert(fileType);
  163.                 dropArea{{modal}}.classList.remove("active");
  164.                 dragText{{modal}}.textContent = "Drag & Drop pour télécharger le fichier";
  165.                 submit{{modal}} = false;
  166.                 minput{{modal}}.value = [];
  167.                 mnameinput{{modal}}.value = [];
  168.                 break;
  169.             }
  170.         }
  171.     }
  173.     function mySubmitFunctionbtn{{modal}}(e) {
  174.         submit{{modal}} = true;
  175.         mdocument.getElementById("mform_id").submit();
  176.     }
  178.     function mySubmitFunction{{modal}}(e) {
  179.         if (!submit{{modal}}) {
  180.             e.preventDefault();
  181.         }
  182.     }
  183. </script>