templates/content/page/crud/import-index.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 {
  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.active {
  19.         border: 2px solid #fff;
  20.     }
  21.     .drag-area .icon {
  22.         font-size: 100px;
  23.         color: #fff;
  24.     }
  25.     .drag-area header {
  26.         font-size: 24px;
  27.         font-weight: 500;
  28.         color: #fff;
  29.     }
  30.     .drag-area span {
  31.         font-size: 22px;
  32.         font-weight: 500;
  33.         color: #fff;
  34.         margin: 10px 0 15px;
  35.     }
  36.     .drag-area 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 img {
  48.         height: 100%;
  49.         width: 100%;
  50.         object-fit: cover;
  51.         border-radius: 5px;
  52.     }
  53. </style>
  55. <div class="modal fade" id="pageModal" 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.             {% set url = ea_url()
  63.                     .setDashboard('App\\Controller\\Admin\\DashboardController')
  64.                     .setController('App\\Controller\\Content\\Page\\PageCrudController')
  65.                     .setAction('import') %}
  66.             <form action="{{url}}" method="POST" id="mform_id" onsubmit="return mySubmitFunction(event)">
  67.                 <div class="modal-body mbody" style="max-height: 48rem;">
  68.                     <div class="drag-area">
  69.                         <div class="icon">
  70.                             <i class="fas fa-cloud-upload-alt"></i>
  71.                         </div>
  72.                         <header>Drag & Drop pour télécharger le fichier</header>
  73.                         <span>OU</span>
  74.                         <button type="button">Parcourir le Fichier</button>
  75.                         <input type="file" name="fileToUpload" id="fileToUpload" accept="text/csv" multiple hidden>
  76.                     </div>
  77.                 </div>
  78.                 <div class="modal-footer">
  79.                     <input type="text" name="mfileToUpload" id="mfileToUpload" hidden>
  80.                     <input type="text" name="mfileNameToUpload" id="mfileNameToUpload" hidden>
  81.                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
  82.                     <button type="submit" class="btn btn-primary" onclick="return mySubmitFunctionbtn(event)">Importer</button>
  83.                 </div>
  84.             </form>
  85.         </div>
  86.     </div>
  87. </div>
  89. <script>
  90.     let submit = false;
  91.     // selecting all required elements
  92.     let modalf = document.querySelector(".modal-footer"),
  93.         minput = modalf.querySelector("input"),
  94.         mnameinput = modalf.querySelector("#mfileNameToUpload");
  95.     let dropArea = document.querySelector(".drag-area"),
  96.         dragText = dropArea.querySelector("header"),
  97.         button = dropArea.querySelector("button"),
  98.         input = dropArea.querySelector("input");
  99.     let file; // this is a global variable and we'll use it inside multiple functions
  101.     button.onclick = () => {
  102.         input.click(); // if user click on the button then the input also clicked
  103.     };
  104.     input.addEventListener("change", function () { // getting user select file and [0] this means if user select multiple files then we'll select only the first one
  105.         file = this.files;
  106.         dropArea.classList.add("active");
  108.         //file.forEach(showFile);
  109.         showFile(); // calling function
  110.     });
  112.     // If user Drag File Over DropArea
  113.     dropArea.addEventListener("dragover", (event) => {
  114.         event.preventDefault(); // preventing from default behaviour
  115.         dropArea.classList.add("active");
  116.         dragText.textContent = "Libérer pour télécharger le fichier";
  117.     });
  119.     // If user leave dragged File from DropArea
  120.     dropArea.addEventListener("dragleave", () => {
  121.         dropArea.classList.remove("active");
  122.         dragText.textContent = "Drag & Drop pour télécharger le fichier";
  123.     });
  125.     // If user drop File on DropArea
  126.     dropArea.addEventListener("drop", (event) => {
  127.         event.preventDefault();
  128.         // preventing from default behaviour
  129.         // getting user select file and [0] this means if user select multiple files then we'll select only the first one
  130.         file = event.dataTransfer.files;
  131.         input.files = event.dataTransfer.files;
  133.         //file.forEach(showFile);
  134.         showFile(); // calling function
  135.     });
  137.     function showFile() {
  138.         minput.value = [];
  139.         mnameinput.value = [];
  140.         dragText.innerHTML = '';
  141.         for (let index = 0; index < file.length; index++) {
  142.             //const element = file[index];
  143.             //console.log(file[index]);
  144.             let fileType = file[index].type; // getting selected file type
  145.             //let fileURL = fileReader.result;
  147.             let validExtensions = ["text/csv", "application/vnd.ms-excel"]; // adding some valid image extensions in array
  148.             if (validExtensions.includes(fileType)) { // if user selected file is an image file
  149.                 let fileReader = new FileReader(); // creating new FileReader object
  150.                 fileReader.onload = () => {
  151.                     let fileURL = fileReader.result;
  152.                     let imgTag = `Fichier déposé avec succès  <br>`;
  153.                     filename =  file[index].name;
  154.                     dragText.innerHTML  += filename + ' , ' ;
  155.                     minput.value += "|[|" + fileURL;
  156.                     mnameinput.value += "|[|" + filename;
  157.                 };
  158.                 fileReader.readAsDataURL(file[index]);
  160.                 // submit = true;
  161.             } else {
  162.                 alert("Ceci n'est pas un fichier CSV!");
  163.                 dropArea.classList.remove("active");
  164.                 dragText.textContent = "Drag & Drop pour télécharger le fichier";
  165.                 submit = false;
  166.                 minput.value = [];
  167.                 mnameinput.value = [];
  168.                 break;
  169.             }
  170.         }
  171.     }
  173.     function mySubmitFunctionbtn(e) {
  174.         submit = true;
  175.         document.getElementById("mform_id").submit();
  176.     }
  178.     function mySubmitFunction(e) {
  179.         if (!submit) {
  180.             e.preventDefault();
  181.         }
  182.     }
  184. </script>