Как сделать отправку формы
 

Добрый день всем.
Есть такая форма

<form id="formApply" class="form-horizontal" method="POST"
                                      action="{{ route('sendOrder') }}" enctype="multipart/form-data">
                                    @csrf
                                    <div class="mb-3">
                                        <label for="youName">
                                            Full Name <sup>*</sup>
                                        </label>
                                        <div class="col-12">
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="far fa-user"></i>
                                                </span>
                                                <input name="name" id="youName" type="text" class="form-control"
                                                       value="{{ old('name') }}" placeholder="Your Name"
                                                       autocomplete="off" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="youResume">
                                            CV <sup>*</sup> <span class="formLabel">(.pdf, .doc, .docx, .txt)</span>
                                        </label>
                                        <div class="col-12">
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="far fa-file"></i>
                                                </span>
                                                <input name="resume" id="youResume" type="file" class="form-control"
                                                       value="{{ old('resume') }}" placeholder="Your Resume" required>
                                            </div>
                                        </div>
                                    </div>


                                    <div id="upload-container" class="mb-3">
                                        <label for="browseFile">
                                            Introduction Video <sup>*</sup> <span
                                                class="formLabel">(.mp4, .mov, .avi)</span>
                                        </label>
                                        <div class="col-12">
                                            <div class="input-group">
                                                <span class="input-group-text">
                                                    <i class="fa fa-video"></i>
                                                </span>
                                                <input name="video" id="browseFile" type="file" class="form-control"
                                                       value="{{ old('video') }}" placeholder="Your Video">
                                            </div>
                                        </div>
                                    </div>

                                    <div style="display: none;height: 25px" class="progress mt-3">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                                             role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                             aria-valuemax="100" style="width: 75%; height: 100%">75%
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-9 sendForm">
                                            <button type="submit" class="btn btn-primary sendForm">
                                                Apply Now
                                            </button>
                                        </div>
                                    </div>
                                </form>

И есть такой скрипт

let browseFile = $('#browseFile');
                let resumable = new Resumable({
                    target: '{{ route("uploadsFile") }}',
                    query: {_token: '{{ csrf_token() }}'},
                    fileType: ['mp4', 'mkv', 'mov', 'avi'],
                    chunkSize: 20 * 1024 * 1024,
                    headers: {
                        'Accept': 'application/json'
                    },
                    testChunks: false,
                    throttleProgressCallbacks: 1,
                });

                resumable.assignBrowse(browseFile[0]);

                resumable.on('fileAdded', function (file) { // trigger when file picked
                    showProgress();
                    resumable.upload() // to actually start uploading.
                });

                resumable.on('fileProgress', function (file) { // trigger when file progress update
                    updateProgress(Math.floor(file.progress() * 100));
                });

                resumable.on('fileSuccess', function (file, response) { // trigger when file upload complete
                    response = JSON.parse(response)
                    $('#videoPreview').attr('src', response.path);
                    $('.card-footer').show();
                });

                resumable.on('fileError', function (file, response) { // trigger when there is any error
                    alert('Oops! Something went wrong. Reload the page and try again.');
                    location.reload();
                });
                console.log(resumable.filename);
                let progress = $('.progress');

                function showProgress() {
                    progress.find('.progress-bar').css('width', '0%');
                    progress.find('.progress-bar').html('0%');
                    progress.find('.progress-bar').removeClass('bg-success');
                    progress.show();
                }

                function updateProgress(value) {
                    progress.find('.progress-bar').css('width', `${value}%`)
                    progress.find('.progress-bar').html(`${value}%`)
                }

                function hideProgress() {
                    progress.hide();
                }

Через форму я загружаю файлы больших размеров на сервер. Скрипт делит их на части, заливает, а потом склеивает. Все работает нормально, но есть одна проблема - срипт срабатывает сразу же при выборе видеофайла. Я же хочу, чтобы скрипт срабатывал при нажатии на кнопку submit формы - Apply Now.
Моих скудных познаний в js хватило на написание такой конструкции

$(".sendForm").on("click", function () {
...........
});

куда я и поместил код скрипта.
Но это не работает как надо - сначала надо нажать на кнопку Apply Now, потом выбрать видеофайл и снова нажать на кнопку отправки. В общем, криво. Кто знает, подскажите, как сделать так, чтобы работало нормально.
Спасибо

Заменить fileAdded (строки 16-19) на:

$('#formApply').on('submit', function(event) {
    event.preventDefault();
    if (browseFile[0].files.length) {
        showProgress();
        resumable.upload();
    }
});

Rise,
Не помогло - по нажатию на кнопку ничего не происходило.
Но на помощь пришел AI. Его ответ

// Используйте событие submit для формы
    $("#formApply").on("submit", function (event) {
        
        event.preventDefault();

       
        initiateFileUpload();
    });

    function initiateFileUpload() {
        showProgress();
        resumable.upload(); 
    }

Сработало.

А в чем разница с тем, что написал Rise?
К тому же в варианте Rise проверка, что вы не нажали кнопку отправки не указав файлы.

Значит вы не выбрали файл.

Со всем уважением, но действительно не работает. Вот если убрать условие, тогда все хорошо. В любом случае, спасибо за помощь.