CSV import using AJAX progress bar

Hi,

Absolute JS/AJAX beginner here; I am looking for a way to modify an already written (and working) function so that I can access it without refreshing the page. The function itself takes a user submitted csv file (containing students information) and reads it into the database.

So far I have

echo '<script language="javascript">
document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';\">&nbsp;</div>";
</script>';
ob_flush();
flush();

in the loop that actually reads and creates the new students and return response()->json(['success' => 'Users imported!']); at the end of the function, presumably I also need some way of returning the percentage progress too?

Then as for the actual page itself, I have modified the original form so that it doesn't carry out the normal form submit and will submit using JS

<script>
       function submitCSV(){
       $("#hideprogress").removeclass('d-none');
       $.ajax({
          type:'POST',
          url:'/admin/import_parse',
          data:'_token = <?php echo csrf_token() ?>',
          success:function(data){
             
          }
       });
    }
</script>

ideally after all of this has executed it will also give the user a message that it succeeded or failed, again the existing code for this is

@if (session('success'))
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    {{ session('success') }}
</div>
@endif
@if (session('error'))
  <div class="alert alert-danger alert-dismissable">
     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      {{ session('error') }}
   </div>
@endif 

but I am pretty sure this will be wrong if everything else changes?

I'm not looking for you to do it for me per se, but someone to point me in the right direction of a tutorial would be excellent!

Thanks!