fe_qrcodegenerator/script.js

let uploadButton = document.getElementById("upload-button");
let chosenfile = document.getElementById("chosen-file");
let fileName = document.getElementById("file-name");
let container = document.querySelector(".container");
let error = document.getElementById("error");
let fileDisplay = document.getElementById("file-display");

const fileHandler = (file, name, type) => {
  console.log(type)
  if (type.split("/")[0] !== "application" && type.split("/")[1] !== "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
    //File Type Error
    error.innerText = "Mohon unggah file excel ber ekstensi .xlsx";
    return false;
  }
  error.innerText = "";
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    //file and file name
    let fileContainer = document.createElement("figure");
    fileContainer.innerHTML += `<figcaption>${name}</figcaption>`;
    fileDisplay.appendChild(fileContainer);
  };
};

//Upload Button
uploadButton.addEventListener("change", () => {
  fileDisplay.innerHTML = "";
  Array.from(uploadButton.files).forEach((file) => {
    fileHandler(file, file.name, file.type);
  });
});

container.addEventListener(
  "dragenter",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
  },
  false
);

container.addEventListener(
  "dragleave",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
  },
  false
);

container.addEventListener(
  "dragover",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.add("active");
  },
  false
);

container.addEventListener(
  "drop",
  (e) => {
    e.preventDefault();
    e.stopPropagation();
    container.classList.remove("active");
    let draggedData = e.dataTransfer;
    let files = draggedData.files;
    fileDisplay.innerHTML = "";
    Array.from(files).forEach((file) => {
      fileHandler(file, file.name, file.type);
    });
  },
  false
);

window.onload = () => {
  error.innerText = "";
};


$(document).ready(function (e) {
  $("#form").on('submit',(function(e) {
   e.preventDefault();

   
   if(document.getElementById("upload-button").files.length == 0 ){
 
    Swal.fire({
      icon: 'error',
      title: 'Gagal',
      text: 'Tidak ada file yang akan diupload !',
    })
    } else {

      

   Swal.fire({
    icon: 'info',
    title: 'Proses Upload',
    html: '<p align="center">Proses generate QR code mungkin akan membutuhkan waktu yang cukup lama.<br><img style="text-align:center;" src="image/loading.gif"></p>',
    showConfirmButton: false,
    allowOutsideClick: false,
    backdrop: `
    rgba(0,0,0,0.7)
  `

  });

   $.ajax({
          url: "ajaxupload.php",
    type: "POST",
    data:  new FormData(this),
    contentType: false,
          cache: false,
    processData:false,
    success: function(data)
       {
     if(data=='invalid')
     {
     
        Swal.fire({
          icon: 'error',
          title: 'Gagal',
          text: 'Terjadi kesalahan !',
        })
     
     }
     else if(data=='capcay'){
      Swal.fire({
        icon: 'error',
        title: 'Gagal',
        text: 'Kode Captcha salah !',
      }).then((result) => {
        /* Read more about isConfirmed, isDenied below */
        if (result.isConfirmed) {
          window.location.replace("http://localhost/qr-aset");
        }
      })

     }

     else if(data=='key'){
      Swal.fire({
        icon: 'error',
        title: 'Gagal',
        text: 'key yang anda gunakan ditolak !',
      }).then((result) => {
        /* Read more about isConfirmed, isDenied below */
        if (result.isConfirmed) {
          window.location.replace("http://localhost/qr-aset");
          
        }
      })

     }

     else
     {
        Swal.fire({
          icon: 'success',
          title: 'Berhasil',
          text: 'Upload file berhasil. silahkan download file qr code.',
          confirmButtonText: 'Download',
          allowOutsideClick: false,
        }).then((result) => {
          /* Read more about isConfirmed, isDenied below */
          if (result.isConfirmed) {
            
            $("#file-display" ).hide();
            $('#form').trigger("reset");
            window.location.replace("http://localhost/qr-aset/tempzip/qraset.zip");
          }
        });
        
       
     }
       },
      error: function(e) 
       {
        Swal.fire({
          icon: 'error',
          title: 'Gagal',
          text: 'Terjadi kesalahan !',
        })
       }          
     });


    }

  }));
 });