Nodejs module running before the Eventlistener

Question

I’m creating a module for node and by performing some tests with the eventListener of the kind change in a field of the kind file, the module is executed before a frame is inserted into the field.

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
    }

}

The Code of Testing:

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

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

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

Just when I open the browser the message None!! is displayed, ie the Event change is being activated even before a file is selected.

I’m using the webpack to create the bundle.js from the archive main.js which is the archive where the test codes are found:

webpack main.js Bundle.js

Answer 1

You have to use the concept of high order Function, that is to return a function to the .addEventListener call, a callback in this case.

It could be so:

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
        }
    }
}

that way when you invoke the function as you have in your code, as an argument from addEventListener, it captures the variables in the callback scope that you return. This yes (the callback) will be called when there is change.