2

Estou criando um módulo para node e ao realizar alguns testes com o eventListener do tipo change em um campo do tipo file, o módulo é executado antes de um arquvo ser inserido no campo.

exports.preview = (fileInput, whereToSee) => {
    if (fileInput && fileInput[0]) {
        let reader = new FileReader();
        reader.onload = (event) => {
            whereToSee.attr('src', event.target.result);
        }
        reader.readAsDataURL(fileInput[0]);
     } else {
        console.error('None!!'); // Mensagem de teste
    }

}

O Código de teste:

var upload = require('../index.js');

const file = document.querySelector('input[type="file"]');

file.addEventListener('change', upload.preview(this, document.querySelector('#blah')));

Logo quando abro o navegador a mensagem None!! é exibida, ou seja, o event change esta sendo ativado antes mesmo de um arquivo ser selecionado.

Estou utilizando o webpack para criar o bundle.js apartir do arquivo main.js que é o arquivo onde encontram-se os códigos de teste:

webpack main.js bundle.js

1 Resposta 1

2

Tens de usar o conceito de high order function, ou seja retornar uma função para o .addEventListener chamar, uma callback neste caso.

Poderia ser assim:

exports.preview = (fileInput, whereToSee) => {
    return function(){
        if (fileInput && fileInput[0]) {
            let reader = new FileReader();
            reader.onload = (event) => {
                whereToSee.attr('src', event.target.result);
            }
            reader.readAsDataURL(fileInput[0]);
         } else {
            console.error('None!!'); // Mensagem de teste
        }
    }
}

dessa maneira quando invocas a função como tens no teu código, como argumento do addEventListener, ela captura as variáveis no escopo da callback que retornas. Essa sim (a callback) será chamada quando houver change.

6
  • mas isso não é o mesmo que atribuir uma função ao exports ?
    – RFL
    Commented 16/03/2017 às 21:22
  • 1
    @RafaelAcioly não. Precisas de passar uma função ao exports como tens, e essa função retorna outra, que é a callback que vai ser usada. Pois o addEventListener precisa de uma função, e como tens ela é executada, o if corre e o addEventListener não recebe nem sequer uma função/callback nos argumentos.
    – Sergio
    Commented 16/03/2017 às 21:23
  • 1
    isso resolveu! obrigado! mas agora estou tendo outro problema também! rs quando passo o this como parametro de upload.preview(this, ...) o objeto de file input não é retornado, e sim um objeto (não sei qual exatamente), como poderia para passar o proprio file como parametro sem ter que seleciona-lo novamente?
    – RFL
    Commented 16/03/2017 às 21:26
  • 1
    @RafaelAcioly não seria caso de passar file em vêz de this?
    – Sergio
    Commented 16/03/2017 às 21:27
  • mas eu preciso pegar o element depois que ele for alterado change, se eu passar o file o elemento ainda esta vazio.
    – RFL
    Commented 16/03/2017 às 21:35

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 .