Laravel backbone progress not working

I'm creating a movies database and I can download the movie data and save the images associated with the movie and the operation can last for up to 3 minutes. What I'm having trouble with is my progress loader this seem to only show the 100 percent mark and not the beginning progress. I console it out and it doesn't initiate a number from 0 to 100 it just goes straight to 100 after the operation is done. What can I do to get this to start from a low number and begin showing the progress for this. All I send is a tmdb_id value in my save movie variable that's all there is to it and for this operation progress is indicated but all my other fetch processes show gradual progress, my question is why isn't this process showing progress. In my Laravel I'm sending a content-length and receiving content-length
Backbone:

    var backboneSync = Backbone.sync;

Backbone.sync = function (method, model, options) {
    /*
     * The jQuery `ajax` method includes a 'headers' option
     * which lets you set any headers you like
     */         
    options.headers = {
        /* 
         * Set the 'Authorization' header and get the access
         * token from the `auth` module
         */
        //'Authorization': 'Bearer ' + auth.getAccessToken()
    };


    options.beforeSend = function(xhr, settings) {
      $('#loader').show();
        settings.xhr = function() {          
            var xhr = $.ajaxSettings.xhr();

            //xhr.setRequestHeader('X-Auth-Token_or_other_header' , your_hash_key)

            xhr.addEventListener("progress", function (event) {
                var val = Math.ceil(event.loaded/event.total*100);
                helper.loader(val);
                console.log(val);
          }, false);

          return xhr;
        }
    }   

    /*
    * Call the stored original Backbone.sync method with
     * extra headers argument added
     */
    return backboneSync(method, model, options);
};

Javascript:

var tmdb_id = $('#movie_selected').val();
var movie = new model.Movie({  });

movie.save({ 
    tmdb_id: tmdb_id
}, 
{   
    beforeSend: function (xhr, options) {
        // this method doesn't work
        console.log('before send'); // Will be "Hello" when collection fetched
    },                            
    success: function(model, response, xhr) {
        $('button#preview-movie').prop('disabled', false);
        $('button#delete-movie').prop('disabled', false);                       
    },
    error: function(e, response, xhr) {
        console.log('error = ')
        console.log(response)
}});

Laravel:

public function store(Request $request) {

    ini_set('max_execution_time', 480);
    mass execution of saving data and images lasts about 3 minutes
}

Laravel middleware:

use Closure;

class AddContentLength {

/**
 * Handle an incoming request.
 *
 * @param  \Illuminate\Http\Request  $request
 * @param  \Closure  $next
 * @return mixed
 */
public function handle($request, Closure $next)
{
    $response = $next($request);

    // to be sure nothing was already output (by an echo statement or something)
    if (headers_sent() || ob_get_contents() != '') return $response;


    if (str_contains($response->headers->get('content-type'), 'application/json')) {
        $content = $response->content();
        $contentLength = strlen($content);

        $response->header('Content-Length', $contentLength);
        $response->header('Accept-Ranges', 'bytes');
        $response->header('X-Content-Length',  $contentLength); 
        $response->header('Content-Type', 'application/json');   
    }    

    // $useCompressedOutput = ($contentLength && isset($_SERVER['HTTP_ACCEPT_ENCODING']) &&
    //    strpos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') !== false);



    // if ($useCompressedOutput) {

    //     // In order to accurately set Content-Length, we have to compress the data ourselves 
    //     // rather than letting PHP do it automatically.
    //     $compressedContent = gzencode($content, 9, FORCE_GZIP);
    //     $compressedContentLength = strlen($compressedContent);
    //     if ($compressedContentLength/$contentLength < 0.9) {
    //         if (ini_get('zlib.output_compression')) ini_set('zlib.output_compression', false);
    //         $response->header('Content-Encoding', 'gzip');
    //         $response->setContent($compressedContent);
    //         $contentLength = $compressedContentLength;
    //     }
    // }

    // compressed or not, sets the Content-Length           

    return $response;
}

}



via ONYX