citrus-cms/resources/views/components/excel-file-input.blade.php

<?php if(isset($tableName))  { 
  ?>
 <form action="{{url("admin/import/". $tableName)}}" enctype="multipart/form-data" method="post" id="excel-form" class="d-none">
     @csrf
     <input type="file" name="excel-file" id="excel-file">
     <button class="btn btn-primary">Send</button>
 </form> 
 <?php } else {
    bilgi("Lütfen tableName değişkenini tanımlayınız","warning");
 } ?>
 <script>
  $(function(){
      function uploadProgressHandler(event) {
          $("#status").html("Uploaded " + event.loaded + " bytes of " + event.total);
          var percent = (event.loaded / event.total) * 100;
          var progress = Math.round(percent);
          $("#uploadProgressBar").html(progress + " %");
          $("#uploadProgressBar").css("width", progress + "%");
          $("#status").html(progress + "% uploaded...");
          if(progress == 100) {
              $("#status").html("{{e2("Processing...")}}");
              $("#uploadProgressBar").addClass("progress-bar-striped");
              $("#uploadProgressBar").addClass("progress-bar-animated");
             
          }
          
      }
      function loadHandler(event) {
          var response = JSON.parse(event.target.responseText);
          if(!response.error) {
            console.log(response);
            $("#status").html("{{e2("Excel process finished!")}}");
            $(".result-panel").removeClass("d-none");
            $("#updateOrAdded").html(response.updateOrAdded);
            $("#added").html(response.added);
            $("#processRow").html(response.processRow);
            $(".progress").addClass("d-none");
          } else {
            $(".error-panel").removeClass("d-none");
            $("#error").html(response.error);
            $(".progress").addClass("d-none");
          }
          
          //$("#uploadProgressBar").css("width", "0%");
          //location.reload();
      }

      function errorHandler(event) {
          $("#status").html("Upload Failed");
      }

      function abortHandler(event) {
          $("#status").html("Upload Aborted");
      }

      $("#excel-file").on("change", function(event){
        $("#progress-modal").modal({backdrop: 'static', keyboard: false}, 'show');
       // $("#excel-form").submit();
       // return true;
        event.preventDefault();
        var file = $("#excel-file")[0].files[0];
        var formData = new FormData();
        formData.append("excel-file", file);
        formData.append("_token", "{{csrf_token()}}");

        $.ajax({
            url: '{{url("admin/import/". $tableName)}}',
            method: 'POST',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            xhr: function () {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress",
                    uploadProgressHandler,
                    false
                );
                xhr.addEventListener("load", loadHandler, false);
                xhr.addEventListener("error", errorHandler, false);
                xhr.addEventListener("abort", abortHandler, false);

                return xhr;
            }
        });
        
      });

      
  }); 
 </script>
 

<!-- Modal -->
<div class="modal fade" id="progress-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      
      <div class="modal-body">
        <div id="loaded_n_total"></div>
        <div id="status">{{e2("Uploading...")}}</div>
        <div class="d-none result-panel">
            <div class="text-center">
              <div class="btn-group">
                  <div class="btn btn-outline-primary">
                      <h1>❇️</h1>
                      {{e2("Added")}} <br>
                      <div id="added"></div>
                  </div>
                  <div class="btn btn-outline-primary">
                      <h1>🔃</h1>
                      {{e2("Update Or Added")}} <br>
                      <div id="updateOrAdded"></div>
                  </div>
                  <div class="btn btn-outline-primary">
                      <h1>⚙️</h1>
                      {{e2("Process Row")}} <br>
                      <div id="processRow"></div>
                  </div>

              </div>
              <br>
              <a href="#" onclick="location.reload()" class="btn btn-primary">{{e2("Reload Page")}}</a>
            </div>
        </div>
        <div class="d-none error-panel">
          <div class="text-center">
              <div class="btn btn-outline-danger">
                  <h1>⛔️</h1>
                  <div id="error"></div>
                  
              </div> <br>
              <a href="#" onclick="location.reload()" class="btn btn-primary">{{e2("Reload Page")}}</a>
          </div>
        </div>
        <div class="progress">
            <div class="progress-bar" id="uploadProgressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      
    </div>
  </div>
</div>
<style>
 #progress-modal .modal-open .modal {
    display: flex!important;
    align-items: center!important;
    .modal-dialog {
        flex-grow: 1;
    }
}
.error-panel .btn, .result-panel .btn {
  height:initial;
  margin: 10px 0;
}
</style>