Estoy usando el cuadro de diálogo Seleccionar archivo para seleccionar imágenes para mi sitio web, pero hay un problema con él.

Incluso cuando hago clic en el botón Seleccionar archivo solo una vez. El cuadro de diálogo de selección de archivos se abre dos veces. Tan pronto como cierro el primer cuadro de diálogo, el segundo se abre automáticamente.

Este es mi HTML:

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

Este es mi 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); } });