0

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?

1 Resposta 1

0

O problema no seu código está nessa construção:

converte()

$.ajax({ ....

Ao chamar o método converte por sua vez, tem esse código:

reader.onload = () => {
    $('#form-cadastrar-passeio').append('<input name="imagem' + x + '" type="hidden" value="' + reader.result + '">')
    x++
}

Ou seja, o onload será executado quando a imagem tiver sido processada, como está na documentação aqui: FileReader/readAsDataURL

Quando a operação de leitura é terminada, a propriedade readyState é atualizada para DONE, e o evento loadend (en-US) é lançado

Para entender melhor o conceito de callback e promise sugiro ler essa outra pergunta: Diferença entre promise e callback

No seu caso está tentado enviar o form sem ainda ter as imagens processadas e criados os novos campos no form. Precisa esperar esse evento ocorrer para ter os elementos adicionados ao form. O exemplo abaixo ilustra isso:

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    console.log("Ponto 1");
    // converter o file de imagem oara uma string de base 64
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
  
  // adicionar um handler para quando o load terminar
  reader.addEventListener('loadend', handleEvent);
  
  console.log("Ponto 2");
}

function handleEvent(e) {
    console.log("Ponto 3")
    console.log(`Terniando, ${e.loaded} bytes processados\nJá pode fazer a chamada Ajax`);
    // agora pode aqui fazer a chamada ajax.
};
<input type="file"  multiple="multiple" onchange="previewFile()"><br>
<img src="" height="200" alt="Preview...">

Note que no output a sequencia mostrada é "Ponto 2, 1 e 3", ou seja, termina a function antes de passar pelo load e loadend.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .