title: HTML/JS - Upload file: Display loader only after file explorer is closed
body: <p>I have an input(type=file), div and icon element</p>
  <pre class="lang-html prettyprint-override"><code>&lt;i id=&quot;hexfile-upload-btn&quot; class=&quot;material-icons icon upload-icon&quot;&gt;file_upload&lt;/i&gt;
  &lt;input id='hexfile-fileid' type='file' hidden/&gt;
  &lt;div id=&quot;hexfile-loader&quot; class=&quot;loader&quot;&gt;&lt;/div&gt; 
  </code></pre>
  <p>where the icon element has an eventlistener attched to it. The js code is:</p>
  <pre class="lang-js prettyprint-override"><code>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 = &quot;inline-block&quot;
      document.getElementById(file-upload-id).addEventListener('change', function(){
          updateTextBox(...)
      });
  }
  </code></pre>
  <p>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).</p>
  <p>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.</p>
  <p>So I guess I need to somehow listen to the event of the user actually pressing the &quot;Open&quot; button of the file explorer? I sadly couldn't work out how that would work. Or are there some other ways?</p>
  <p>Any input on how to solve this would be really appreciated! Thank you!</p>