I am developing a video project in Laravel, where a video can be uploaded and when video is being uploaded then after uploading video there are also few operations is performed. Like: cropping videos, encrypted videos using FFMPEG. And inserting records in some tables.

Below is my js code:

submitHandler: function(form) {
                var formData = new FormData(form);

                // Remove existing checkbox array
                $(form).find('input[type="checkbox"]').each(function() {
                    formData.delete($(this).attr('name'));
                });

                // Add new checkbox values to the formData
                $(form).find('.authorSection').each(function(index) {
                    var checkedValue = $(this).find('input[type="checkbox"]').prop('checked') ?
                        '1' : '0';
                    formData.append($(this).find('input[type="checkbox"]').attr('name'),
                        checkedValue);
                });

                // Handling the termscheckbox
                var termsCheckedValue = $('#terms_n_conditions').prop('checked') ? '1' : '0';
                formData.append('terms_n_conditions', termsCheckedValue);

                // Append CSRF token to formData
                formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

                $('#videoSubmit').html('Please Wait...Do not reload page or click on any button.');
                $("#videoSubmit").attr("disabled", true);
                
                var ajax = new XMLHttpRequest();
                ajax.upload.addEventListener("progress", progressHandler, false);
                ajax.addEventListener("load", completeHandler, false);
                ajax.addEventListener("error", errorHandler, false);
                ajax.addEventListener("abort", abortHandler, false);

                ajax.open("POST", '{{ route('video.store') }}');
                ajax.send(formData);

                function progressHandler(event) {
                     console.log("Uploaded " + event.loaded + " bytes of " + event.total);
                    var percent = (event.loaded / event.total) * 100;
                    console.log('percentage==> '+Math.round(percent));
                    updateProgressBar(Math.round(percent));
                }

                function completeHandler(event) {
                    console.log('Response: ' + event.target.responseText);
                    $('#videoSubmit').html('Submit Your Video');
                    $("#videoSubmit").attr("disabled", false);
                    updateProgressBar(100);
                    // Handle additional operations or redirect here
                }

                function errorHandler(event) {
                    $('#videoSubmit').html('Submit Your Video');
                    $("#videoSubmit").attr("disabled", false);
                    $('.errorDisplayDiv').html('Upload Failed');
                }

                function abortHandler(event) {
                    $('#videoSubmit').html('Submit Your Video');
                    $("#videoSubmit").attr("disabled", false);
                    $('.errorDisplayDiv').html('Upload Aborted');
                }

                function updateProgressBar(percent) {
                    $('#progress').text('Progress: ' + percent + '%');
                    $('.progress .progress-bar').css('width', percent + '%');
                }
            }

here file uploading percentage is showing correct. But after uploading the video, other operations are executed. I want to also add the other operations percentage bar there. How can I do that?