Java Development Tools

Hi Gurus,

Here is the scenario that I try to achieve:

• I would like to check the size of file after user choose the file that they want to upload
• In JS it will checks is it greater than (for example) 100 Bytes
  • If true, I want to prevent it from uploading the file, else it's just fine to upload the file

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.

Please kindly give me advice on how to prevent it to upload from javascript/jQuery.

Here is my code:

JS

$(document).ready(function () {
  $('.UploadFile input').on("change", function (e) {
     if (this.files[0] != null) {
        var fileSize = this.files[0].size;
           
        if (fileSize > 100) {
           alert("File too large!");
           e.preventDefault();
           return;
        } else {
           alert("File ok");
        }
      }
   });
});

The af:inputFile

<af:inputFile label="Upload" id="if1" autoSubmit="true"
               styleClass="UploadFile" immediate="true"
               valueChangeListener="#{fileBean.attachFile}">
</af:inputFile>

Thanks,

Kevin