templates/project/crud/galleryscript.html.twig line 1

Open in your IDE?
  1. html = '<div class="input-group mb-3">';
  2. html += '<input type="text" class="form-control" name="Page[Image]" id="Projet_recaptchaConfigFile" data-bs-toggle="modal" data-bs-target="#modal-gallery">';
  3. // html += '<input type="text" id="Projet_recaptchaConfigFile" name="Page[image]" data-ea-align="left" class="form-control">';
  4. html += '<label class="input-group-text" for="Projet_recaptchaConfigFile">Upload</label>';
  5. html += '</div>';
  7. //$("#Projet_recaptchaConfigFile").parent().html(html);
  9. var indexOfPoint,
  10.     indexOf,
  11.     element,
  12.     dropArea,
  13.     dragText,
  14.     button,
  15.     input,
  16.     nfile,
  17.     fileType,
  18.     validExtensions,
  19.     fileReader,
  20.     fileURL,
  21.     mvalidExtension;
  25. $("#Projet_recaptchaConfigFile").attr('data-bs-toggle', 'modal');
  26. $("#Projet_recaptchaConfigFile").attr('data-bs-target', '#modal-gallery');
  27. $("#Projet_recaptchaConfigFile").prop('readonly', true);
  28. $("#Projet_recaptchaConfigFile").attr('onclick', 'getdirfiles(document.getElementById("Projet_recaptchaConfigFile").value, "nnvalid")');
  30. $("<div class='input-group-prepend' style='margin-bottom: -3%; margin-left: 100%;'><i class='fa fa-trash-o mx-2' style='cursor: pointer;' onclick='trashgall()'></i></div>").insertBefore("#Projet_recaptchaConfigFile");
  32. $('#Projet_recaptchaConfigFile').keypress(function (e) {
  33.     return false;
  34. });
  37. // onclick="sendCode('', 'text-')"
  38. function getdirfiles(dirname, valid) {
  39.     selected = '';
  40.     indexOfPoint = dirname.lastIndexOf(".");
  41.     if (indexOfPoint >= 0) {
  42.         const substring = dirname.slice(indexOfPoint, dirname.length);
  43.         if (dirname.includes(substring)) {
  44.             indexOf = dirname.lastIndexOf("/");
  45.             selected = dirname.slice(indexOf, dirname.length);
  46.             dirname = dirname.replace(selected, '') + '/';
  47.             // "data-123".replace(/data-/g,'');
  48.         }
  49.     }
  51.     if ('{{entity.instance.switchEnLigne}}') {
  53.         $.ajax({
  54.             url: "{{ path('get_dirs_content_projet') }}",
  55.             type: 'POST',
  56.             timeout: 15000,
  57.             data: {
  58.                 'dirname': dirname,
  59.                 'selected': selected,
  60.                 'validinput': valid,
  61.                 'imageFtpServer': '{{entity.instance.imageFtpServerEnligne}}',
  62.                 'imageFtpLogin': '{{entity.instance.imageFtpLoginEnligne}}',
  63.                 'imageFtpMdp': '{{entity.instance.imageFtpMdpEnligne}}',
  64.                 'imageHttpServer': '{{entity.instance.imageHttpServerEnligne}}',
  65.             },
  66.             dataType: 'json',
  67.             success: function (data) {
  68.                 $('#valdircontent').html(data.content);
  69.                 // dirPathNiveauIndicator
  70.                 $('#dirPathNiveauIndicator').html(data.niveauindicator);
  71.             }
  72.         });
  73.     } else {
  75.         $.ajax({
  76.             url: "{{ path('get_dirs_content_projet') }}",
  77.             type: 'POST',
  78.             timeout: 15000,
  79.             data: {
  80.                 'dirname': dirname,
  81.                 'selected': selected,
  82.                 'validinput': valid,
  83.                 'imageFtpServer': '{{entity.instance.imageFtpServer}}',
  84.                 'imageFtpLogin': '{{entity.instance.imageFtpLogin}}',
  85.                 'imageFtpMdp': '{{entity.instance.imageFtpMdp}}',
  86.                 'imageHttpServer': '{{entity.instance.imageHttpServer}}',
  87.             },
  88.             dataType: 'json',
  89.             success: function (data) {
  90.                 $('#valdircontent').html(data.content);
  91.                 // dirPathNiveauIndicator
  92.                 $('#dirPathNiveauIndicator').html(data.niveauindicator);
  93.             }
  94.         });
  95.     }
  97. }
  99. function selectedimage(obj) {
  100.     element = $(obj);
  101.     $('.selectedFtpImg').css("border", "0px");
  102.     $('.selectedFtpImg').css("border-color", "");
  103.     $('.selectedFtpImg').css("background-color", "white");
  104.     element.css("border", "1px solid #5656b5;");
  105.     element.css("border-color", "#5656b5");
  106.     element.css("background-color", "#5656b5");
  107.     $('#Projet_recaptchaConfigFile').val(element.attr('data-dir'));
  109.     rescheckext = checkcurrentExtProjet($('#Projet_recaptchaConfigFile').val());
  111.     if (rescheckext == 'file') {
  112.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="images/fileicon.webp" class="img-fluid mt-2" style="max-height: 100px;">';
  113.     } else if (rescheckext == 'json') {
  114.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="images/jsonfileicon.png" class="img-fluid mt-2" style="max-height: 100px;">';
  115.     } else {
  116.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="' + element.attr('data-racine') + $('#Projet_recaptchaConfigFile').val() + '" class="img-fluid w-100 mt-2" style="max-height: 100px;">';
  117.     }
  119.     $("#imagepreviewtoremove").remove();
  120.     $(".setrecaptchafile").append(setrecaptchafile);
  121. }
  122. // clickedImg
  125. // image preview
  126. const imgphtml = $(".setrecaptchafile");
  128. rescheckext = checkcurrentExtProjet($('#Projet_recaptchaConfigFile').val());
  130. if (rescheckext == 'file') {
  131.     var setrecaptchafile = '<img id="imagepreviewtoremove" src="images/fileicon.webp" class="img-fluid mt-2" style="max-height: 100px;">';
  132. } else if (rescheckext == 'json') {
  133.     var setrecaptchafile = '<img id="imagepreviewtoremove" src="images/jsonfileicon.png" class="img-fluid mt-2" style="max-height: 100px;">';
  134. } else {
  135.     if ('{{entity.instance.switchEnLigne}}') {
  136.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="{{entity.instance.imageHttpServerEnligne}}' + $('#Projet_recaptchaConfigFile').val() + '" class="img-fluid w-100 mt-2" style="max-height: 100px;">';
  137.     } else {
  138.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="{{entity.instance.imageHttpServer}}' + $('#Projet_recaptchaConfigFile').val() + '" class="img-fluid w-100 mt-2" style="max-height: 100px;">';
  139.     }
  140.     
  141. }
  144. if ($('#Projet_recaptchaConfigFile').val() != '' && $('#Projet_recaptchaConfigFile').val() != undefined) {
  145.     imgphtml.append(setrecaptchafile);
  146. }
  148. $(".setrecaptchafile").change(function () {
  149.     $("#imagepreviewtoremove").remove();
  150. });
  153. // reset text in image
  154. function trashgall() {
  155.     $('#Projet_recaptchaConfigFile').val('');
  156.     $("#imagepreviewtoremove").remove();
  157. }
  165. // umpload image script
  167. submit = false;
  168. // selecting all required elements
  169. dropArea = document.querySelector(".drag-area");
  170. dragText = dropArea.querySelector("header");
  171. button = dropArea.querySelector("button");
  172. input = dropArea.querySelector("input");
  173. nfile; // this is a global variable and we'll use it inside multiple functions
  175. button.onclick = () => {
  176.     input.click(); // if user click on the button then the input also clicked
  177. };
  178. 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
  179.     nfile = this.files[0];
  180.     dropArea.classList.add("active");
  182.     //file.forEach(showFile);
  183.     showFile(); // calling function
  184. });
  186. // If user Drag File Over DropArea
  187. dropArea.addEventListener("dragover", (event) => {
  188.     event.preventDefault(); // preventing from default behaviour
  189.     dropArea.classList.add("active");
  190.     dragText.textContent = "Libérer pour télécharger le fichier";
  191. });
  193. // If user leave dragged File from DropArea
  194. dropArea.addEventListener("dragleave", () => {
  195.     dropArea.classList.remove("active");
  196.     dragText.textContent = "Drag & Drop pour télécharger le fichier";
  197. });
  199. // If user drop File on DropArea
  200. dropArea.addEventListener("drop", (event) => {
  201.     event.preventDefault();
  202.     // preventing from default behaviour
  203.     // getting user select file and [0] this means if user select multiple files then we'll select only the first one
  204.     nfile = event.dataTransfer.files[0];
  205.     input.file = event.dataTransfer.files[0];
  207.     //file.forEach(showFile);
  208.     showFile(); // calling function
  209. });
  211. function showFile() {
  213.     fileType = nfile.type; //getting selected file type
  214.     validExtensions = ["application/json"]; //adding some valid image extensions in array
  215.     // alert(fileType);
  216.     if (validExtensions.includes(fileType)) { //if user selected file is an image file
  217.         fileReader = new FileReader(); //creating new FileReader object
  218.         fileReader.onload = () => {
  219.             fileURL = fileReader.result; //passing user file source in fileURL variable
  220.             // UNCOMMENT THIS BELOW LINE. I GOT AN ERROR WHILE UPLOADING THIS POST SO I COMMENTED IT
  221.             // imgTag = `<img src="${fileURL}" alt="image">`; //creating an img tag and passing user selected file source inside src attribute
  222.             // dropArea.innerHTML = imgTag; //adding that created img tag inside dropArea container
  224.             imgTag = `Fichier déposé avec succès  <br>`;
  225.             filename = '<img src="' + fileURL + '" data-name="' + nfile.name + '" id="jsonToUpload" class="h-100 d-none">';
  226.             filename += '<img src="images/jsonfileicon.png" data-name="' + nfile.name + '" id="imageToUpload" class="h-100">';
  227.             $("#uploadedimgdisplay").html(filename);
  228.             $("#dropImageArea").removeClass("d-none");
  229.             $("#dragArea").addClass("d-none");
  230.         }
  231.         fileReader.readAsDataURL(nfile);
  232.     } else {
  233.         /* alert("This is not an Image File!");
  234.         dropArea.classList.remove("active");
  235.         dragText.textContent = "Drag & Drop to Upload File"; */
  237.         //alert("Ceci n'est pas un Image!");
  238.         dropArea.classList.remove("active");
  239.         dragText.textContent = "Drag & Drop pour télécharger le fichier";
  240.         submit = false;
  241.     }
  242. }
  244. function mySubmitFunctionbtn(e) {
  245.     submit = true;
  246.     document.getElementById("mform_id").submit();
  247. }
  249. function mySubmitFunction(e) {
  250.     if (!submit) {
  251.         e.preventDefault();
  252.     }
  253. }
  255. function setuploadimgvalue() {
  256.     /* console.log($("#imageToUpload").attr('src'));
  257.     console.log($("#imageToUpload").attr('data-name')); */
  258.     $('#Projet_recaptchaConfigFile').val('/upload/' + $("#imageToUpload").attr('data-name'));
  260.     rescheckext = checkcurrentExtProjet($("#imageToUpload").attr('src'));
  262.     if (rescheckext == 'file') {
  263.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="images/fileicon.webp" class="img-fluid mt-2" style="max-height: 100px;">';
  264.     } else if (rescheckext == 'json') {
  265.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="images/jsonfileicon.png" class="img-fluid mt-2" style="max-height: 100px;">';
  266.     } else {
  267.         var setrecaptchafile = '<img id="imagepreviewtoremove" src="' + $("#imageToUpload").attr('src') + '" class="img-fluid mt-2" style="max-height: 100px;">';
  268.     }
  271.     $("#imagepreviewtoremove").remove();
  272.     $(".setrecaptchafile").append(setrecaptchafile);
  274.     if ('{{entity.instance.switchEnLigne}}') {
  276.         $.ajax({
  277.             url: "{{ path('get_image_projet_upload_json') }}",
  278.             type: 'POST',
  279.             timeout: 15000,
  280.             data: {
  281.                 'file': $("#jsonToUpload").attr('src'),
  282.                 'name': $("#jsonToUpload").attr('data-name'),
  283.                 'imageFtpServer': '{{entity.instance.imageFtpServerEnligne}}',
  284.                 'imageFtpLogin': '{{entity.instance.imageFtpLoginEnligne}}',
  285.                 'imageFtpMdp': '{{entity.instance.imageFtpMdpEnligne}}',
  286.                 'imageHttpServer': '{{entity.instance.imageHttpServerEnligne}}',
  287.             },
  288.             dataType: 'json',
  289.             success: function (data) {
  290.                 // console.log(data.content);
  291.                 // console.log();
  292.                 // console.log(data.msg);
  293.             }
  294.         });
  295.     } else {
  297.         $.ajax({
  298.             url: "{{ path('get_image_projet_upload_json') }}",
  299.             type: 'POST',
  300.             timeout: 15000,
  301.             data: {
  302.                 'file': $("#jsonToUpload").attr('src'),
  303.                 'name': $("#jsonToUpload").attr('data-name'),
  304.                 'imageFtpServer': '{{entity.instance.imageFtpServer}}',
  305.                 'imageFtpLogin': '{{entity.instance.imageFtpLogin}}',
  306.                 'imageFtpMdp': '{{entity.instance.imageFtpMdp}}',
  307.                 'imageHttpServer': '{{entity.instance.imageHttpServer}}',
  308.             },
  309.             dataType: 'json',
  310.             success: function (data) {
  311.                 // console.log(data.content);
  312.                 // console.log();
  313.                 // console.log(data.msg);
  314.             }
  315.         });
  316.     }
  318. }
  321. function resetuploadvalues() {
  322.     $("#dropImageArea").addClass("d-none");
  323.     $("#dragArea").removeClass("d-none");
  324.     $("#imageToUpload").attr("src", "");
  325. }
  327. function getFileExtension(filename) {
  328.     var ext = /^.+\.([^.]+)$/.exec(filename);
  329.     return ext == null ? "" : ext[1];
  330. }
  333. function checkImageGalleyExt() {
  334.     mvalidExtension = ["jpg",
  335.         "jpeg", "bmp",
  336.         "gif", "png",
  337.         "apng", "webp",
  338.         "ico", "icon", "cur",
  339.         "jfif", "pjpeg",
  340.         "pjp", "svg"];
  342.     $('[id=imagegellery]').each(function () {
  343.         // console.log($(this).attr("src"));
  344.         // console.log(mvalidExtension.includes(getFileExtension($(this).attr("src"))));
  345.         // console.log(getFileExtension($(this).attr("src")));
  347.         if (getFileExtension($(this).attr("src")) == 'json') {
  348.             $(this).attr("src", "images/jsonfileicon.png");
  349.             $(this).css("width", "80px");
  350.         }
  352.         if (!mvalidExtension.includes(getFileExtension($(this).attr("src")))) {
  353.             $(this).attr("src", "images/fileicon.webp");
  354.             $(this).css("width", "80px");
  355.         }
  357.     });
  358. }
  360. function checkcurrentExtProjet(idtocheck) {
  361.     mvalidExtension = ["jpg",
  362.         "jpeg", "bmp",
  363.         "gif", "png",
  364.         "apng", "webp",
  365.         "ico", "icon", "cur",
  366.         "jfif", "pjpeg",
  367.         "pjp", "svg"];
  369.     if (getFileExtension(idtocheck) == 'json') {
  370.         return 'json';
  371.     } else if (mvalidExtension.includes(getFileExtension(idtocheck))) {
  372.         return 'image';
  373.     } else {
  374.         return 'file';
  375.     }
  376. }