Как запустить отправку формы?

Question

[Владимир Кохан]

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

Код формы

<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>

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

Код JS

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, потом выбрать видеофайл и снова нажать на кнопку отправки. В общем, криво. Кто знает, подскажите, как сделать так, чтобы работало нормально.
Спасибо

Answer 1

[Сергей delphinpro]

Я эту библиотеку не использовал, так навскидку:

Вот у вас прописана отправка сразу по добавлении:

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

Уберите этот код, и отправляйте по клику

button.addEventListener('click', ()=>{
                    showProgress();
                    resumable.upload() // to actually start uploading.
});

Answer 2

[Владимир Кохан]

Спасибо, работает. Только надо добавить
e.PreventDefault()

А вот что подсказал ИИ

$("#formApply").on("submit", function (event) {
                event.preventDefault();
                initiateFileUpload();
            });

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

Comments

[Сергей delphinpro]

ну так даже лучше, по отправке формы. форма теоретически может быть отправлена и кликом по кнопке и энтером.