I'm was not able to find the correct answer to my problem so far.

I have an HTML form with two file inputs. To reduce user clicks I would like to activate the second file input after the first file is selected.

Unfortunately so far I have not been able to achieve this.

Here is my try:

document.getElementById("firstFile").addEventListener('change', (event) => {
    document.getElementById("secondFile").click();
});

While this works on Chrome with no problems other browsers are a different story: Safari has no output at all and Firefox logs to console.

<input> picker was blocked due to lack of user activation.

What are possible solutions and is this even possible? Thanks!