Aspx - Using FileUpload class and a CustomValidator, how can I get my custom validator to run when selecting "Cancel" on the file upload dialog box?

Question

I am having an issue with my Custom Validator and the FileUpload class with asp.net with Chrome/Edge. When browsing for a file and selecting one, the file is stored in the fileUploader.files property. But if you click browse again, this files property clears.

I'm trying to reset the text of the uploader to "Choose a file" after the second time you browse, that way the previously selected file name doesn't stay there, making it seem like a file is still selected.

So why is my customvalidator not executing when I click "Cancel" on the file dialog box, but only when I click "Open" or double click a file?

Here's my code:

JS CODE:

function validateFile(source, arguments) {
      console.log('validateFile');
      arguments.IsValid = false;
      var fuLoader = document.getElementById("FileUpload1");
      var fileName;
      for (i = 0; i < fuLoader.files.length; i++){
          fileName = fuLoader.files[i].name;
      }
      arguments.IsValid = true;
      if (fuLoader.files.length > 1)
      {
          spnUploader.textContent = "Multiple Files Selected";
      }
      else
      {
          spnUploader.textContent = fileName;
      }
        

ASPX Code

  <label class="custom-file">
         <asp:FileUpload ID="FileUpload1" AllowMultiple="true" runat="server" CssClass="custom-file-input" />
         <span id="spUploader" runat="server" class="custom-file-control">Choose file...</span>
  </label>   
  <span class="tinytextgray">The maximum allowed file size is 5MB or smaller.</span>&nbsp;
  <asp:CustomValidator ID="cvValidator" runat="server"  
     Text="Title" ToolTip="ToolTip" 
     ErrorMessage="Message" 
     CssClass="redtext" 
     ControlToValidate="FileUpload1"  
     ClientValidationFunction = "validateFile"
     ValidationGroup="FormGroup"
     Display="Dynamic">
  </asp:CustomValidator>