I am using the select file dialog box to select images for my website but there's a problem with it.

Even when I click the Select File button only once. The file selection dialog box is opened twice. As soon as I close the first dialog box the second one automatically opens up.

This is my HTML:

<button class="upload"> Select File </button>
    
<input type='file' id='file' hidden="hidden" /> 

This is my Javascript:

let fileBtn = document.querySelector('#file');

let fileUpload = document.querySelector('.upload');


    fileUpload.addEventListener('click', () => {
                fileBtn.click();
            });

            fileBtn.addEventListener('change', (ev) => {
                var formdata = new FormData();
                formdata.append('image', ev.target.files[0]);

                var myHeaders = new Headers();
                myHeaders.append('Authorization', 'Client-ID c745c1426f97da9');

                var requestOptions = {
                    method   : 'POST',
                    headers  : myHeaders,
                    body     : formdata,
                    redirect : 'follow'
                };

                fetch('https://api.imgur.com/3/image', requestOptions)
                    .then((response) => response.json())
                    .then((result) => {
                        console.log(result);

                        imgUrl = result.data.link;

                        localStorage.imgurl = result.data.link;

                        
                    })
                    .catch((error) => console.log('error', error));

                if (fileBtn.value) {
                    uplodValue = fileBtn.files;

                    console.log(uplodValue);
                }
            });