0

Olá, estou com um código em angularJS porém só funciona quando estou no debug do browser.

    $scope.upload=function(){
        var newFiles = []; 
        $scope.carregando = true;
        angular.forEach($scope.files, function (item) {
            if(item.upload){
                item.idFicha = vm.ficha.id;
                var reader  = new FileReader();
                reader.readAsDataURL(item._file);

                //TODO Quero recuperar a substring do result.
                item.arquivo = reader.result.substr(reader.result.indexOf(',') + 1);

                newFiles.push(item);
                item.upload = false;
            }
        });
        service.uploadDocumento(newFiles);
        $scope.carregando = false;
    };

Bem, quando tiro o breakpoint para executar a função a variável item.arquivo fica nula, mas se eu colocar o breakpoint e inspecionar a variável é está com valor e a função funcionar perfeitamente.

O que pode estar acontecendo e o que devo fazer para dar fim nesse problema?

1 Resposta 1

0

Acontece que a API FileReader carrega os dados de forma assíncrona, isso quer dizer que o código continuará sendo processado, mesmo que uma determinada função ainda não esteja completa, ou seja, o código não espera uma determinada linhar "terminar seu trabalho".

Quando temos uma função assíncrona, nós também temos alguns eventos disponíveis. No caso do FileReader, os eventos são:

  • abort: Será chamado quando o procedimento for abortado;
  • error: Será chamado quando houver algum erro;
  • load: Será chamado quando o arquivo for carregado;
  • loadstart: Será chamado no início do carregamento do arquivo;
  • loadend: Será chamado no final do carregamento do arquivo;
  • progress: Será chamado durante o carregamento do arquivo.

No seu caso, você terá que adicionar toda a regra do seu código na função load, por exemplo:

const input = document.querySelector("input");

input.addEventListener("change", () => {
  for (let file of input.files) {

    let reader = new FileReader();
    reader.addEventListener("load", result => {
      console.log( `Teste #2: ${reader.result}` )
    })
    reader.readAsDataURL(file);
    console.log( `Teste #1: ${reader.result}` )
  }

});
<input type="file" multiple />

Como eu citei, o FileReader não espera o arquivo ser carregado para poder continuar o processamento restante do código, porém quando adicionamos um breakpoint, nós forçarmos essa "pausa". Isso é o tempo necessário para que o FileReader possa ler o arquivo e já armazenar na propriedade result.

0

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 .