Пользователь на странице выбирает картику (intup[type="file"]) и надо сделать 3 кропа, с различными соотношениями сторон. Для этого использую cropper.js
Создаю 3 инстанса cropper.js. После того как юзер выбрал/настроил кропы собираю из каждого инстанса кроппера blob. Запихиваю все в DataTransfer. Получается объект с 3мя файлами. Далее пытаюсь запихнуть полученные файлы в другой инпут:
function setCroppedFiles() {
return new Promise(resolve => {
let cropped = document.querySelector('[data-cropped]')
getFileList().then(dto => {
setTimeout(function () {
cropped.files = dto.files
if (cropped.files.length !== dto.files.length) {
setTimeout(function () {
cropped.files = dto.files
}, 250)
}
resolve(dto.files)
}, 200)
})
})
}
function getFileList() {
return new Promise(resolve => {
let dto = new DataTransfer()
document.querySelectorAll('[data-ratio]').forEach(el => {
if (el.crop) {
el.crop.getCroppedCanvas().toBlob((blob) => {
let fileName
let imgFile = document.getElementById('teaser-image')
if (imgFile.files.length) {
fileName = imgFile.files[0].name
} else {
fileName = el.src.split('/').last()
}
fileName = el.dataset.ratio + '_' + fileName
getFileFromBlob(blob, fileName).then(file => {
dto.items.add(file)
})
})
}
})
resolve(dto)
})
}
function getFileFromBlob(blob, filename) {
return new Promise(resolve => {
setTimeout(() => {
let file = new File([blob], filename)
resolve(file)
}, 100)
})
}
только вот файлы не всегда корректно попадают в интуп, т.е.может попасть 1 или 2 или все или вообще ни одного.
Как сделать чтобы в инпут попадали все файлы?
