Скрипт croppie, режем фото в реальном времени, валидация, проблема

Цена договорная
19 ноября 2021, 07:58 • 2 отклика • 22 просмотра
Croppie - для обрезки фото в реальном времени.

Поставил,
настроил под себя, все работает, через метод пост с формы передаю
картинку в бд, проблем нет, но передает не измененную картинку, надо
как-то через js передавать в контроллер.

Задавал подобный вопрос, чел за денюжку помог сделать, но не все допилили.
Задаю вопрос повторно.

Вообщем ловим обрезанную фотку и передаем в js, работает это так, в js у меня валидация, скрипт инициализации фото поверх валидации сделан, если поля не заполнил выводиться валидация, как только я выбрал фотку, то первым делом срабатывает инициализация, то есть ошибка об том что поле не заполнено вылезает не сразу, особенно если фотка весит 3 мега или более, так как идет инициализация, вот в этом и проблема, вроде все работает, но надо допилить, как-то чуть переделать, чтобы сначала вся валидация срабатывала, если все ок, все поля заполнены, то уже потом инициализация фотки и отправка.

Вообщем надо довести до ума.

У меня там два выбора фотки, они отдельные, типа вид спереди, вид сзади.

То как у меня сделано, показываю:
<script>
$(document).on('submit', '#validform', function(e) {
e.preventDefault();
$('#validform .ax-result').removeClass('successform error').html('');
let formLoad = new FormData($(this)[0]);

//ловим измененную картинку и передаем в контроллер
croppieDemo.croppie('result', {
type: 'blob',
size: 'original'
}).then(function(blob) {
formLoad.append('images[]', blob);

croppieDemo2.croppie('result', {
type: 'blob',
size: 'original'
}).then(function(blob) {
formLoad.append('images[]', blob);

App.sendAx('/ax/dks/send', formLoad, {
silence: true,
successFunction: function(d) {
$('#validform .ax-result').removeClass('successform error').addClass('successform').html(d.message);
$('#validform .ax-form').hide();
//перекидывает к валидации, когда форма исчезает
const el = document.getElementById('goer');
el.scrollIntoView({
behavior: "smooth"
});
},
errorFunction: function(d) {
$('#validform .ax-result').removeClass('successform error').addClass('error').html(d.message);
$('#validform .ax-form').show();
}
});

}).catch(function(e) {
console.log(e)
});

}).catch(function(e) {
console.log(e)
});

});
</script>