@topalek

Как програмно положить файлы в input?

Пользователь на странице выбирает картику (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 или все или вообще ни одного.
Как сделать чтобы в инпут попадали все файлы?
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Короче, есть 2 стула варианта,

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

Как подвариант - просто отправить ВСЕ данные аяксом, получить ответ что все ок, и сделать яваскриптом редирект куда нужно, что и проще и не требует манипуляций с ключами и тд...

2) Сохранить картинки в хиден поля в виде бэйс64, на сервере раскатать обратно в файлы.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы