Sometimes I encounter a very strange behavior of the browser's native Select File Dialog.
I have a <input type="file" onchange="console.log(event.target.files)" /> element to upload a single file.
Usually the onchange event is triggered instantly (respectively after some milliseconds) after selecting a file in the Select File Dialog.
But sometimes the browser kind of freezes and it takes up to 10 seconds until the onchange event is called.
One thing I've noticed: If I have a network drive in my Windows Explorer Quick Access toolbar that is not reachable (because I'm not connected with VPN), this massive delay problem occurs much more often (although I do select a file on my Desktop that has nothing to do with this network drive).
Same in all major browsers (Chrome, Edge, Firefox), so it probably has something to do with the Windows Operating System.
Does somebody else facing this problem?
Minimal reproducible example:
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
let timestamp;
function onClick() {
window.addEventListener('focus', fileDialogClosed);
}
function fileDialogClosed() {
document.getElementById('result').innerHTML =
'File Dialog closed.<br />';
timestamp = new Date().getTime();
window.removeEventListener('focus', fileDialogClosed);
}
function onChange(file) {
let delay = new Date().getTime() - timestamp;
document.getElementById('result').innerHTML +=
'onchange event called with delay of <strong>' +
delay +
'ms</strong>';
document.body.querySelector('input').value = null;
}
</script>
</head>
<body>
<h1>File Input</h1>
<p>
Little demo to show/measure delay between closed file input dialog and
call of onchange event handler.
</p>
<input
type="file"
onclick="onClick()"
onchange="onChange(event.target.files[0])"
/><br /><br />
<div id="result"></div>
</body>
</html>
