Tengo un elemento de entrada (tipo = archivo), div e icono

 <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>

donde el elemento icon tiene un detector de eventos adjunto. El código js es:

 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(...) }); }

Tal como está el código actualmente, mi elemento cargador se muestra tan pronto como el usuario hace clic en el elemento del icono (por ejemplo, tan pronto como se abre la ventana del explorador de archivos).

Lo que me gustaría es que el elemento del cargador solo se muestre tan pronto como se cierre la ventana del explorador de archivos y el archivo se cargue realmente. Una vez que el archivo se carga realmente, escondo el cargador.

Entonces, ¿supongo que necesito escuchar de alguna manera el evento del usuario que realmente presiona el botón "Abrir" del explorador de archivos? Lamentablemente no pude averiguar cómo funcionaría eso. ¿O hay otras formas?

¡Cualquier aporte sobre cómo resolver esto sería muy apreciado! ¡Gracias!