title: Client-side validation on <h:inputFile>
body: <p>My JSF view uploads a file using plain <code>&lt;h:inputFile&gt;</code>. It has an AJAX action to start uploading as soon as a file is chosen (<code>onchange</code> event). I would like to do some basic validation on the file, using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File" rel="nofollow">HTML5 DOM File API</a> and Javascript, on the client side to <strong>stop uploading in certain cases</strong>.</p>
  
  <p>(Yes, I do understand that Javascript with this check can be circumvented, this is just a "bandwidth and time saving check" for normal users that accidentally choose the wrong file - there will still be server-side validations. And I also understand that the File API may not yet be available on all (older) browsers.)</p>
  
  <p>Simplified JSF file:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;html
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
  &gt;
  &lt;h:head&gt;
      &lt;h:outputScript target="body"&gt;
  //&lt;![CDATA[
  function doUpload(data, event) {
      if ("event" == data.type) {
          switch (data.status) {
              case "begin":
                  // validate file size
                  if (data.source.files[0].size &gt; 20971520) { //20MiB
                      alert('ERROR: File too big!');
                      event.preventDefault();
                      return false;
                  }
                  // TODO show throbber
                  break;
  
              case "complete":
                  // TODO hide throbber
                  break;
  
              case "success":
                  break;
          }
      }
  }
  //]]&gt;
      &lt;/h:outputScript&gt;
  &lt;/h:head&gt;
  &lt;h:body&gt;
      &lt;h:form id="testuploadform" enctype="multipart/form-data"&gt;
          &lt;h:inputFile id="uploadFile" name="uploadFile" value="#{testBean.uploadFile}"&gt;
              &lt;!--  TODO validator/s for server-side validation --&gt;
              &lt;f:ajax event="change" listener="#{testBean.ajaxLst_autoUpload}"
                      onevent="function(data){ doUpload(data,event); }"
              /&gt;
          &lt;/h:inputFile&gt;
      &lt;/h:form&gt;
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It seems that despite using the <code>event.preventDefault()</code> call, the event is still handled further: the file is uploaded and my listener function <code>TestBean.ajaxLst_autoUpload()</code> is able to obtain it and do work on it.</p>
  
  <p>Is what I am trying to do even possible? And how do I go about it?</p>
  
  <p>====</p>
  
  <p>I guess a different approach would be to <a href="https://developer.mozilla.org/en/docs/Using_files_from_web_applications#Example_Uploading_a_user-selected_file" rel="nofollow">use the XMLHttpRequest.open() process to issue a request from AJAX</a> (only once validation succeeds), I'm however unsure how one would do a "valid" <code>POST</code> request <strong>to JSF</strong> - I´ve only seen examples to PHP and Java Servlets. I'm not primarily keen to write an upload Servlet (although it can be done if needed and examples can be googled), and I don't know JSF under the hood too well to know how that would correspond with a Servlet. But any pointers in this regard would also be appreciated.</p>