nasserahmed96

Upload file

Jan 19th, 2021
1,251
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="card-body">
  2.            <div class="row">
  3.                 <div class="col-12">
  4.                   <div class="card-body">
  5.  
  6.                           <form method="POST" action="javascript:void(0)" enctype="multipart/form-data" id="upload_form">
  7.                               @csrf
  8.                               <h2>@lang('labels.backend.grades.note_before_import_title')</h2>
  9.                               @lang('labels.backend.grades.note_before_import')
  10.                               <h5 class="text-danger">@lang('labels.backend.grades.warning_import')</h5>
  11.  
  12.                               <div class="row">
  13.                                   <div class="form-group col-md-6 col-12">
  14.                                       <label class="font-weight-bold  ">@lang('labels.backend.grades.import_student')</label>
  15.                                       <input type="file" id="select_button" accept=".xls,.xlx,.xlsx,.ods" class="form-control" name="file">
  16.                                   </div>
  17.                                   <div class="form-group col-md-6 col-12 d-flex">
  18.                                       <button id="upload_button" class="btn btn-primary mt-auto"
  19.                                        type="submit" >@lang('labels.backend.grades.upload')</button>
  20.                                   </div>
  21.                               </div>
  22.                               <div class='table-responsive'>
  23.                                 <table id='students_table' class='table table-bordered table-striped'>
  24.                                 </table>
  25.                             </div>
  26.                           </form>
  27.                           <button id="save_button" class="btn btn-primary mt-auto">
  28.                                      Save</button>
  29.                          
  30.                   </div>
  31.  
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </div>
  36. @push('after-scripts')
  37.      <script type="text/javascript"  src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  38.     <script>
  39.       //Extract grade_id from URL, it should be the last element in the URL
  40.       path_name = window.location.pathname;
  41.       grade_id = path_name.split('/');
  42.       grade_id = grade_id[grade_id.length - 1];
  43.      
  44.       var result_data = [];
  45.       columns = [
  46.       {"title" : "First Name"},
  47.       {"title" : "Last Name"},
  48.       {"title": "Email"}
  49.       ]
  50.       /*Nasser 11-01-2020
  51.         This function will be called from the save button to save the result data into the database,
  52.         there should be a separated function in the controller (For each Model) to manage the data parsing and saving*/
  53.  
  54.       $('#save_button').on("click", function () {
  55.         var result_data_array = [];
  56.         var result_data_object = {"data" : result_data}
  57.         var result_data_string = JSON.stringify(result_data_object);
  58.  
  59.         data = {
  60.           "students": result_data,
  61.           "grade_id": grade_id
  62.         };
  63.         $.ajax({
  64.           url: "{{ route('admin.grades.save_from_file') }}",
  65.           type: "POST",
  66.           data: data,
  67.           success: function(result){  
  68.           warnings = result["warnings"];
  69.           saved_students = result["saved_students"];
  70.           warnings_message = warnings["duplications"]["message"];
  71.           duplicated_emails = warnings["duplications"]["duplicated_emails"];
  72.           alert(message);
  73.           alert(duplicated_email);
  74.             console.log("Response: ", result);
  75.           }
  76.         });
  77.       });
  78.  
  79.        
  80.         $('#upload_form').submit(function (e) {
  81.             console.log($(this));
  82.             var formData = new FormData($(this)[0]);
  83.             console.log("Form data: ", formData);
  84.             formData.append("_token", "{{ csrf_token() }}");
  85.             formData.append("grade_id", grade_id);    
  86.             $.ajax(
  87.             {
  88.                 url: "{{ route('admin.upload_students_report') }}",
  89.                 type: "POST",
  90.                 data: formData,
  91.                 contentType: false,
  92.                 processData: false,
  93.         success: function(result){     
  94.             result_data = [...result["data"]];
  95.             warning = result["warning"];
  96.             alert(warning);
  97.             preview_file(result_data);
  98.         }
  99.             });
  100.  
  101.         });
  102.  
  103.         function preview_file(data)
  104.             {
  105.                 //console.log("Data: ", data);
  106.                 $('#students_table').DataTable({
  107.                     "destroy": true,
  108.                     "data": data,
  109.                     columns: columns
  110.                 });
  111.             }
  112.     </script>
RAW Paste Data