Estou desenvolvendo um formulário que pode receber várias imagens em um campo input do tipo file multiple. O método que estou utilizando converte estas imagens para base64, e assim envia-as via POST num input hidden com o valor do base64. Porém, estou encontrando alguns problemas no ajax e fileReader.
Aqui seguem os códigos:
function converte() {
const imagens = document.getElementById('passeio_imagens').files;
var x = 0;
for (var i = 0; i < imagens.length; i++) {
const reader = new FileReader()
reader.readAsDataURL(imagens[i]);
reader.onload = () => {
$('#form-cadastrar-passeio').append('<input name="imagem' + x + '" type="hidden" value="' + reader.result + '">')
x++
}
}
}
$('#form-cadastrar-passeio').validate({
rules: {
nome: 'required',
preco: 'required',
duracao: 'required',
tipo: 'required',
descricao: 'required',
endereco: 'required',
longitude: 'required',
latitude: 'required'
},
submitHandler: (form) => {
converte()
$.ajax({
url: form.action,
type: form.method,
data: $(form).serialize(),
success: (response) => {
console.log(response)
const jsonObject = JSON.parse(response)
alert(jsonObject.message)
if (jsonObject.code === 200) {
location.href = '../'
}
},
error: (message) => {
alert('Erro ao inserir dados: ' + message)
}
})
}
}
})
O problema que estou tendo é quando o POST chega ao PHP, os campos imagem0, imagem1... não são recebidos. Desconfio que seja por causa que o reader.onload não tenha terminado até o ajax ser executado. Teria alguma forma de assegurar que o reader.onload de multiplas imagens termine antes de executar o ajax?