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 ...

Get PrimeFaces Cookbook - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.