title: Angular how to show a loading cursor on Angular File Upload
body: <p>I have a file upload that works as expected however on our server it takes a while before the file dialog box pops up.</p>
  
  <p>How can I intercept the call and show a loading screen or even a wait cursor until the file dialog finally opens</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="file"&gt;Choose File&lt;/label&gt;
      &lt;input type="file"
             id="file"
            #input
             (change)="handleFileInput($event.target.files)"&gt;
    &lt;button type="button" (click)="showLoader(); input.click();"&gt;Click Me&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The handleFileInput works fine when the user selects a file to upload, however there is a 5 - 7 second wait time between the user clicking the "Choose File" button and the dialog box showing up</p>
  
  <p>EDIT this is the dialog box that I am referring to
  <a href="https://i.stack.imgur.com/R6Lhz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R6Lhz.png" alt="enter image description here"></a></p>
  
  <p>EDIT#2:
  So based on an answer below I figured that I could call two events with the click function of the button.  I am able to get the loading screen to show while the dialog box is getting itself together, but the issue now is if the user hits the cancel button of the dialog box. The loading screen doesnt go away.</p>