How do I open a dialog to select a file using Electron?

I’m trying to link a button to opening a dialog to select a file but I’m not succeeding, when I click on the button nothing happens…

I expected that clicking the button would open the OS’s native dialog to select a file.

My code:

<div class="tools-header">
    <h2>Tools</h2>
</div>
<div class="form-group">
    <label for="game-directory">Arquivo do Jogo</label>
    <div class="input-group">
        <input type="text" class="form-control" id="game-directory" readonly />
        <button class="btn btn-dark" id="explore-btn">Explorar...</button>
        <input type="file" id="file-selector" style="display: none;" />
    </div>
    <small id="file-path"></small>
</div>

<script>
    const gameDirectoryInput = document.getElementById('game-directory');
    const exploreButton = document.getElementById('explore-btn');
    const fileSelector = document.getElementById('file-selector');
    const filePath = document.getElementById('file-path');

    exploreButton.addEventListener('click', () => {
        fileSelector.click(); 
    });

    fileSelector.addEventListener('change', (event) => {
        if (event.target.files.length > 0) {
            const selectedFile = event.target.files[0];
            gameDirectoryInput.value = selectedFile.name; 
            filePath.textContent = `Arquivo selecionado: ${selectedFile.name}`; 
        } else {
            gameDirectoryInput.value = ''; 
            filePath.textContent = ''; 
        }
    });
</script>