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