Get Started Themes Templates Resources v12.0.

0-SNAPSHOT

FileUpload Drag and Drop

Search by name...
 SERVER API

Video  CLIENT API

In supported browsers, a file can be selected by dragdrop from filesystem. FileUpload component itself is the drop zone.

FILE

Upload
Basic
Basic

Basic Auto  Choose

Single

Multiple

Auto

DragDrop Drop Zone

Chunked
Drop zone p:inputTextarea demo.
Tooltips

Download

Drop on the text area to upload, or choose.

DRAGDROP

Draggable

DataView

DataTable dnd.xhtml FileUploadView.java

Custom

1 <style>
2 body .ui-inputfield.ui-state-drag {
3 background: #ffffd6;
4 }
5 </style>
6
7 <div class="card">
8 <h:form>
9 <p:growl id="messages" showDetail="true"/>
10
11 <h5>Basic</h5>
12 <p:fileUpload listener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="true"
13 update="messages" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
14
15 <h5>Drop Zone</h5>
16 <div class="ui-fluid">
17 <div class="field">
18 <p:inputTextarea id="customDropZone" widgetVar="textarea"
19 rows="5" value="#{fileUploadView.dropZoneText}"/>
20 <small>
21 Drop on the text area to upload, or
22 <p:link value="choose" onclick="PF('uploadDnd').show();return false" style="font-size:inherit"/>.
23 </small>
24 </div>
25 </div>
26 <p:fileUpload widgetVar="uploadDnd" listener="#{fileUploadView.handleFileUploadTextarea}"
27 sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" dropZone="customDropZone"
28 style="display: none"/>
29 </h:form>
30 </div>

PrimeFaces 12.0.0 by PrimeTek   