Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>After some research this is a little more complicated than it first appears.</p> <p><strong>JSF and multiple files</strong></p> <p>First of all, JSF 2.2 defines <code>&lt;h:inputFile&gt;</code> tag which is limited to a single file, i.e. it does not support HTML5 parameter <code>multiple=true</code>. See <a href="https://stackoverflow.com/questions/16837090/how-can-i-upload-multiple-files-with-jsf-2-2?rq=1">this</a> for more details. On the other hand, it is very easy to extend this tag to allow multiple files since the uploaded files are fetched from the <code>request</code>, so they are easily available. </p> <p><strong>Where are the files parsed and persisted?</strong></p> <p>All JSF requests are handled by the <code>FacesServlet</code>, which is annotated with Servlet's 3.1 tag <code>@MultipartConfig</code>. This annotation basically does all the heavy lifting of extracting and writing the uploaded files. See <a href="http://docs.oracle.com/javaee/7/tutorial/doc/servlets011.htm" rel="nofollow noreferrer">this</a> and <a href="https://stackoverflow.com/questions/3337056/convenient-way-to-parse-incoming-multipart-form-data-parameters-in-a-servlet">this</a>.</p> <p>Although this is very handy and takes care of most things, it doesn't have a progress listener interface, which means that you will get the files (<code>Parts</code>) when they are fully uploaded. I don't see a way to actually intercept this is a clean way in order to implement a server-side progress bar. </p> <p><strong>Server-side Vs Client-side progress listener</strong></p> <p>In order to implement a server side progress listener, you will need somehow to handle files yourself and notify the user about the progress using <code>polling</code> or <a href="http://docs.oracle.com/javaee/7/tutorial/doc/websocket.htm" rel="nofollow noreferrer">WebSockets</a>.</p> <p>For the client-side, you will need to either write a custom <code>POST</code> function like <a href="https://stackoverflow.com/questions/15410265/file-upload-progress-bar-with-jquery">this</a> or use a library like this <a href="http://blueimp.github.io/jQuery-File-Upload/" rel="nofollow noreferrer">this</a> to handle the <code>POST</code> as most browsers don't provide progress information. Basically, instead of using the browsers functionality to do a post (AFAIK) you handle the request yourself and hence you have control of the bytes transferred. The problem here is that <code>FacesServlet</code> expects a request which is formatted by the <code>jsf.js</code> functions and I do not see an easy way to intercept the <code>JS</code> request just for processing file upload.</p> <p><strong>What are my options then?</strong></p> <p>I would safely suggest using an existing library that offers this functionality. If you have the time and still want to DIY, I think that the best way to go is to write your own <code>FileUploadServlet</code> that 'understands' <a href="http://en.wikipedia.org/wiki/JSON" rel="nofollow noreferrer">JSON</a> or <a href="http://en.wikipedia.org/wiki/XMLHttpRequest" rel="nofollow noreferrer">XHR</a> and use a <code>JQuery</code> plugin to initiate the upload and provide the client-side progress bar. </p> <p><strong>Example</strong></p> <p>I have finally decided to go with <a href="http://blueimp.github.io/jQuery-File-Upload/" rel="nofollow noreferrer">JQuery/blueimp fileupload</a>. See <strong><a href="https://stackoverflow.com/questions/20456243/how-can-i-define-a-jax-rs-service-that-processes-multi-part-data-in-jee">this comment</a></strong> for details. Note, that this is not actually part of the normal JSF Flow, I developed a custom way for feeding the actual parts in my application.</p> <p>PS. As I am new to this, don't read this answer as a definitive answer but as a starting point for your own research.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload