input file event onchange no work when button click input file

I fire input file via JS function like this:

function PujarFitxerGP() {
document.getElementById('FUFitxer').click();
};

This control have a onchange event to validate the file:

<input type="file" onchange="ValidateGP();return false;" ID="FUFitxer" style="display:none" />

Event is firing correctly but when I get the input file by Id not contains the file:

document.getElementById('FUFitxer').files[0].name; ------>UNDEFINED

If I do the same via input file (changing style=”display:none”) is working as expected.

How I can resolve this problem? What I did wrong?

Thanks!

Answer

You could use the onchange event’s parameter to access the files object on change

function ValidateGP(e) {
  const file = e.target.files[0];
  console.log(file.name);
}

function PujarFitxerGP() {
  document.getElementById('FUFitxer').click();
};

#FUFitxer {
  display: none;
}

<input type="file" id="FUFitxer" onchange="ValidateGP(event)" />

<button onclick="PujarFitxerGP(event)">Click here!</button>