Как показать процентный прогресс в реальном времени для операции отправки формы в laravel ⇐ Jquery

[Anonymous]

Я разрабатываю видеопроект в Laravel, куда можно загружать видео, и когда видео загружается, то после загрузки видео также выполняется несколько операций. Например: обрезка видео, зашифрованное видео с помощью FFMPEG. И вставка записей в некоторые таблицы.
Ниже мой js-код:

Код: Выделить всё

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 + '%');
}
}

здесь процент загрузки файлов отображается правильно. Но после загрузки видео выполняются другие операции. Я также хочу добавить туда процентную шкалу других операций. Как мне это сделать?

Подробнее здесь: https://stackoverflow.com/questions/784 ... in-laravel