Basic, automatic, drag and drop, and multiple file uploading

The fileUpload component provides a file upload mechanism with enhanced features compared to the basic HTML <input type="file"> file upload definition. The component provides an HTML5-powered UI with capabilities such as drag-and-drop, uploading multiple files, and progress tracking; it also supports legacy browsers (for IE 8+) for compatibility by degrading gracefully.

How to do it…

A basic definition for the file upload would be as follows:

<h:form enctype="multipart/form-data">
  <p:fileUpload value="#{fileBean.file}" mode="simple" />
  <p:commandButton value="Upload" ajax="false"/>
</h:form>

The fileUpload component will be rendered as in the following image with a Choose File button and a text button stating no file selected:

Note

In the simple mode, PrimeFaces renders the <input type="file"> HTML element. In this case, the no file selected label that is seen right next to the file picker button...