I have inherited code which includes Javascript/AJAX to display a progress bar – I can't understand how it works

I have inherited the maintenance/development of a website. In a few places it makes use of Javascript/AJAX to display a progress bar while processing takes place. I have written my own scripts for extracting database records and I want to display a progress bar while this takes place.

I can’t understand how the Javascript component works. When I use it the progress bar immediately shows 100% but this is before any processing takes place. I can’t work out how to change this and to call the script functions at various stages in the processing. I have attached my PHP script and the Javascript script so you can see what I am working with.

My extract process is in two parts. The first part displays my standard web page structure and simply asks the user to hit the Extract button. This invokes the upload_image script when the user clicks the button and then ‘chains’ to the PHP script that actually extracts the sightings records.

<?php
/* export_sightings.php
Export all sightings records from cbcrecords as CSV file
*/

require_once($_SERVER['DOCUMENT_ROOT'] . '/inc/standard_page_start.php');
?>

<!-- ================================ -->
<!-- ***** MAIN CONTENT START ***** -->

<section class="main-container padding-bottom-clear">
<div class="container">
    <div class="row">
        <div class="main col-12">
            <h3 class="title">Export sightings to CSV</h3>
            <div class="separator-2"></div>
            <p>Use this tool to extract sightings data to a CSV which will be sent to you by email.</p>
        </div>
    </div>

    <div class="row">
        <div class="main col-12">
            <form action="src/export_sightings.php" 
                  id="myForm" 
                  name="frmupload" 
                  method="post" 
                  enctype="multipart/form-data">
                    <input type="submit" 
                           name='startextract' 
                           class="submit-button btn btn-sm btn-default" 
                           value="START EXTRACT"  
                           onclick='upload_image();'/>
            </form>

            <div class="progress" id="progress_bar">
            <div class="bar" id="bar"><p class="text-white text-center">extracting the data...<br><br></p></div>
            <div class="percent" id="percent">0%</div>
            </div>

            <p class="text-danger mt-4"><i class="fa fa-warning"></i> Please wait for the yellow confirmation box to appear below once you have clicked 'START EXTRACT'. Depending upon the number of records to be extracted, this may take a while!</p>

            <div class="output_image" id="output_image"></div>


        </div>
    </div>
</div>
</section>

<!-- ***** MAIN CONTENT END ***** -->
<!-- ================================ -->

<?php include 'inc/standard_page_end.php'; ?>

Here is the Javascript script progress.js

function upload_image() 
{
  console.log('Hit the progress.js scritpt');
  var bar = $('#bar');
  var percent = $('#percent');
  $('#myForm').ajaxForm({
    beforeSubmit: function() {
      document.getElementById("progress_bar").style.display="block";
      var percentVal = '0%';
      bar.width(percentVal)
      percent.html(percentVal);
    },

    uploadProgress: function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      bar.width(percentVal)
      percent.html(percentVal);
    },

  success: function() {
      var percentVal = '100%';
      bar.width(percentVal)
      percent.html(percentVal);
      console.log(percentVal);
    },

    complete: function(xhr) {
      if(xhr.responseText)
      {
        document.getElementById("output_image").innerHTML=xhr.responseText;
      }
    }
  }); 
}

It looks to me (in my very limited experience) as though I should be able to call uploadProgress and success separately but I can’t work out how to do that. It seems at the moment as though these two functions are self executing.

I looked in detail at the other two parts of the website that use the progress bar but I can’t find any calls to the function other than in the core script progress.js