PrimeFaces Cookbook

Uploading a file with drag-and-drop

In supported browsers, a file can also be dragged-and-dropped for uploading with fileUpload, and the component itself will be the drop zone.

How to do it...

The dragDropSupport attribute defines whether or not to enable drag-and-drop from the filesystem. By default, the value of this attribute is true. In order to provide drag-and-drop support, the fileUpload component should be in advanced mode, which is the default mode. The definition of the fileUpload component for uploading files with drag-and-drop would be as follows:

<p:fileUpload id="upload" value="#{fileController.file}"
  dragDropSupport="true"
  update="growl"
  fileUploadListener="#{fileController.handleFileUpload}" />

How it works...

The fileUploadListener ...