title: How to Abort/Prevent/Stop af:inputFile Uploading File using Javascript/JQuery?
body: <p>I saw many solution with uploading file provided here but it seems doesn't work for my case. Here is the scenario that I try to achieve:</p>
  
  <ul>
  <li>I would like to check the size of file after user choose the file that they want to upload</li>
  <li>In JS it will checks is it greater than (for example) 100 Bytes
  
  <ul>
  <li>If true, I want to prevent it from uploading the file, else it's just fine to upload the file</li>
  </ul></li>
  </ul>
  
  <p>The file size validation is fine, the issue is, somehow I couldn't prevent af:inputFile from uploading the file after it exits the javascript validation. </p>
  
  <p>Please kindly give me advice on how to prevent it to upload from javascript/jQuery.</p>
  
  <p>Here is my code:</p>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function () {
      $('.UploadFile input').on("change", function (e) {
        if (this.files[0] != null) {
          var fileSize = this.files[0].size;
  
          if (fileSize &gt; 100) {
            alert("File too large!");
            e.preventDefault();
            return;
          }
          else {
            alert("File ok");
          }
        }
      });
      });
  </code></pre>
  
  <p>The af:inputFile</p>
  
  <pre><code>&lt;af:inputFile label="Upload" id="if1" autoSubmit="true"
                      styleClass="UploadFile" immediate="true"
                      valueChangeListener="#{fileBean.attachFile}"&gt;
  &lt;/af:inputFile&gt;
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Kevin</p>