1

Fala galera, blz?

Hoje tentei fazer um clone do dropzone só para testar a api do File e FileReader. Porém, acho que estou esquecendo algum conceito de loop.

De acordo com a interação do loop, pego a extensão do arquivo atual pra exibir um thumb sem imagem caso seja diferente de (jpg|png|jpeg).

O problema é que a linha que verifica está pegando sempre a extensão do último item do array

Segue:


for (var i = 0; i < files.length; i++) {
   var fr = new FileReader();
   fr.readAsDataURL(files[i]);
   var name = files[i].name;
   var size = files[i].size / 1000;
   var type = files[i].type;
   var ext = name.substr(name.lastIndexOf("."), name.length);

   fr.onload = function(r) {

     // aqui
     var tag = ext.match(/\.(jpg|jpeg|png)/) ? "img" : "div";

     console.log(tag);

     m += `<div class="up-item hint--bottom" aria-label="deu bom">
              <${tag} src="${r.target.result}" />
           </div>`;
     console.log(m);
   };
}
1
  • Não seria melhor declara no loop fr.onload antes do fs.readAsDataURL? Commented 13/08/2019 às 3:23

2 Respostas 2

3

Para não parecer cópia, eu estava redigindo esta resposta quando a outra foi publicada, e é isso que foi dito mesmo. O onload é assíncrono e o for executa todas as interações antes, retornando o último processamento.

Porém eu sugeriria não usar for, mas apenas uma função recursiva e IIFE (Immediately Invoked Function Expression), função que é executada assim que é lida.

Basta iniciar uma variável de controle com valor 0 fora da função, e dentro da função ela será incrementada após cada onload até o limite de itens na array files (files.length). Essa variável será os índices dos itens da array, como faria a variável i do for. Como o onload é assíncrono, basta chamar a mesma função novamente quando o onload for completado e se o valor da variável de controle for menor que files.length.

Ficaria assim:

var idx = 0; // inicia a variável de controle
(function arqs(){
   var flen = files.length; // pega o tamanho da array
   if(flen){ // verifica se tem pelo menos 1 item na array
      var fr = new FileReader();
      fr.readAsDataURL(files[idx]);
      var name = files[idx].name;
      var size = files[idx].size / 1000;
      var type = files[idx].type;
      var ext = name.substr(name.lastIndexOf("."), name.length);

      fr.onload = function(r) {

        // aqui
        var tag = ext.match(/\.(jpg|jpeg|png)/) ? "img" : "div";

        console.log(tag);

        m += `<div class="up-item hint--bottom" aria-label="deu bom">
                 <${tag} src="${r.target.result}" />
              </div>`;
        console.log(m);

        idx++; // incrementa a variável

        if(idx < flen) arqs(); // chama a função novamente

      };
   }
})(); // executa a função
4
  • Poderia usa o while,eu mesmo não gosto desse método que você colocou. Commented 13/08/2019 às 3:51
  • 1
    Fique à vontade para postar uma resposta que vc goste e que seja útil e funcional.
    – Sam
    Commented 13/08/2019 às 3:53
  • Essa funcionou :D hehe Commented 13/08/2019 às 13:25
  • @Sam. Eu suspeitava de assincronisno da função, mas deu um branco, por isso vim perguntar aqui. Só gostaria de saber se essa falha minha foi falta de conhecimento sobre os conceitos de escopo do JavaScript ? Saberia me dizer? E como vc chegou a sua resposta? Grato Commented 17/08/2019 às 20:51
3

Isso está acontecendo porque a função onload não é executada imediatamente, ela é executada quando o arquivo é carregado, e a esse ponto o seu loop já rodou todas as iterações, portanto ext está com o valor da ultima iteração.

Tente enviar o valor das suas variáveis para uma função separada, dessa forma o onload pode acessa-las de forma segura, pois os valores não serão sobrescritos durante o loop:

for (var i = 0; i < files.length; i++) {
   var fr = new FileReader();
   fr.readAsDataURL(files[i]);
   var name = files[i].name;
   var size = files[i].size / 1000;
   var type = files[i].type;
   var ext = name.substr(name.lastIndexOf("."), name.length);

   onFileLoad(fr, name, size, type, ext)
}

function onFileLoad(fr, name, size, type, ext) {
   fr.onload = function(r) {

     var tag = ext.match(/\.(jpg|jpeg|png)/) ? "img" : "div";

     console.log(tag);

     m += `<div class="up-item hint--bottom" aria-label="deu bom">
              <${tag} src="${r.target.result}" />
           </div>`;
     console.log(m);
   }
}

Você também pode isolar o valor dessas variáveis dentro do escopo de uma IIFE

for (var i = 0; i < files.length; i++) {
   var fr = new FileReader();
   fr.readAsDataURL(files[i]);
   var name = files[i].name;
   var size = files[i].size / 1000;
   var type = files[i].type;
   var ext = name.substr(name.lastIndexOf("."), name.length);

   ((fr, name, size, type, ext) => fr.onload = function(r) {

       var tag = ext.match(/\.(jpg|jpeg|png)/) ? "img" : "div";

       console.log(tag);

       m += `<div class="up-item hint--bottom" aria-label="deu bom">
                 <${tag} src="${r.target.result}" />
             </div>`;
       console.log(m);

   })(fr, name, size, type, ext);
}
1
  • Obrigado amigo, entendi o porque :D Commented 13/08/2019 às 13:25

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 .