I wish to have the user prompted by modal before uploading picture, how can I prevent the input from being activated at same time as my modal and instead have the input triggered upon closing my displayed modal?
const modal = document.querySelector('.modal');
const openModal = document.querySelector('.open-button');
const closeModal = document.querySelector('.close-button');
openModal.addEventListener('click', () => {
modal.showModal();
})
closeModal.addEventListener('click', () => {
modal.close();
})<input class="open-button" type="file"
accept="image/png, image/jpeg" >
<button>Send</button>
</form>
</div>
</div>
</div>
</div>
<dialog class="modal" id="modal">
<h2>Hello</h2>
<p>This is a modal</p>
<button class="button close-button">Proceed</button>
</dialog>
<footer>const modal = document.querySelector('.modal');
const openModal = document.querySelector('.open-button');
const closeModal = document.querySelector('.close-button');
closeModal.addEventListener('click', () => {
modal.close();
document.getElementById("input-browseFile").click();
})
function onclick_browseFile() {
modal.showModal()
}<button onclick="onclick_browseFile()">Browse</button>
<input id="input-browseFile" class="open-button" type="file"
accept="image/png, image/jpeg" hidden>
<button>Send</button>
</form>
</div>
</div>
</div>
</div>
<dialog class="modal" id="modal">
<h2>Hello</h2>
<p>This is a modal</p>
<button class="button close-button">Proceed</button>
</dialog>
<footer>