Passing arguments to callback functions

Question

How can I pass parameters to an arrow function when an eventListener is triggered?

// Name of certificate
let certificateName = document.querySelector('.js--c-name').value;

// Call upload function
currentFileInput.addEventListener('change', fileUpload , false);

const fileUpload = (certificateName) = (evt) => {
  // Here I need the parameter certificateName for testing
  console.log(`Name of Certificate: #{certificateName}`);

  // Function stuff...
  let myFile = evt.target.files[0],
      maxFileSize = evt.target.getAttribute('data-fileSizeMax');

  // Check filesize
  if(myFile.size <= maxFileSize){
   // etc.
  }

}

Answer 1

Make your fileUpload to return the inner function

const fileUpload = (certificateName) => (evt) => {

  console.log(`Name of Certificate: #{certificateName}`);

  let myFile = evt.target.files[0],
      maxFileSize = evt.target.getAttribute('data-fileSizeMax');

  if(myFile.size <= maxFileSize){
   // etc.
  }

}

You need to call the fileUpload function and pass certificateName .

currentFileInput.addEventListener('change', fileUpload(certificateName), false);

Answer 2

You need to wrap the function call in another function

let certificateName = document.querySelector('.js--c-name').value;

currentFileInput.addEventListener('change', function(e){
  fileUpload(e, certificateName ); //observe changes in this line
}, false);

const fileUpload = (evt, certificateName) => { //pass the arguments 
  //rest of your code as is    
}