I have an input(type=file), div and icon element
<i id="hexfile-upload-btn" class="material-icons icon upload-icon">file_upload</i>
<input id='hexfile-fileid' type='file' hidden/>
<div id="hexfile-loader" class="loader"></div>
where the icon element has an eventlistener attched to it. The js code is:
function setup() {
document.getElementById('hexfile-upload-btn').addEventListener('click', function(){
openDialog('hexfile-fileid')
});
}
function openDialog(file-upload-id) {
document.getElementById(file-upload-id).click();
document.getElementById('hexfile-loader').style.display = "inline-block"
document.getElementById(file-upload-id).addEventListener('change', function(){
updateTextBox(...)
});
}
As the code currently stands, my loader element is displayed as soon as the user clicks the icon element (e.g. as soon as the file explorer window is openend).
What I would like is that the loader element is only displayed as soon as the file explorer window is closed and the file gets actually uploaded. Once the file is actually uploaded, I hide the loader.
So I guess I need to somehow listen to the event of the user actually pressing the "Open" button of the file explorer? I sadly couldn't work out how that would work. Or are there some other ways?
Any input on how to solve this would be really appreciated! Thank you!
Move the code that shows the loader to inside the change handler, that way the loader is shown when you select a file
function setup() {
document.getElementById('hexfile-upload-btn').addEventListener('click', function(){
openDialog('hexfile-fileid')
});
}
function openDialog(file-upload-id) {
document.getElementById(file-upload-id).click();
document.getElementById(file-upload-id).addEventListener('change', function(){
document.getElementById('hexfile-loader').style.display = "inline-block"
updateTextBox(...)
});
}