In supported browsers, a file can be selected by dragdrop from filesystem. FileUpload component itself is the drop zone.
<style>
body .ui-inputfield.ui-state-drag {
background: #ffffd6;
}
</style>
<div class="card">
<h:form>
<p:growl id="messages" showDetail="true"/>
<h5>Basic</h5>
<p:fileUpload listener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="true"
update="messages">
<p:validateFile sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" />
</p:fileUpload>
<h5>Drop Zone</h5>
<div class="ui-fluid">
<div class="field">
<p:inputTextarea id="customDropZone" widgetVar="textarea"
rows="5" value="#{fileUploadView.dropZoneText}"/>
<small>
Drop on the text area to upload, or
<p:link value="choose" onclick="PF('uploadDnd').show();return false" style="font-size:inherit"/>.
</small>
</div>
</div>
<p:fileUpload widgetVar="uploadDnd" listener="#{fileUploadView.handleFileUploadTextarea}"
sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpeg|jpg|png)$/" dropZone="customDropZone"
style="display: none"/>
</h:form>
</div>
@Named
@RequestScoped
public class FileUploadView {
private UploadedFile file;
private UploadedFiles files;
private String dropZoneText = "Drop zone p:inputTextarea demo.";
public void upload() {
if (file != null) {
FacesMessage message = new FacesMessage("Successful", file.getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
public void uploadMultiple() {
if (files != null) {
for (UploadedFile f : files.getFiles()) {
FacesMessage message = new FacesMessage("Successful", f.getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
}
public void handleFileUpload(FileUploadEvent event) {
FacesMessage message = new FacesMessage("Successful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
public void handleFileUploadTextarea(FileUploadEvent event) {
String jsVal = "PF('textarea').jq.val";
String fileName = EscapeUtils.forJavaScript(event.getFile().getFileName());
PrimeFaces.current().executeScript(jsVal + "(" + jsVal + "() + '\\n\\n" + fileName + " uploaded.')");
}
public void handleFilesUpload(FilesUploadEvent event) {
for (UploadedFile f : event.getFiles().getFiles()) {
FacesMessage message = new FacesMessage("Successful", f.getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
}
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
public UploadedFiles getFiles() {
return files;
}
public void setFiles(UploadedFiles files) {
this.files = files;
}
public String getDropZoneText() {
return dropZoneText;
}
public void setDropZoneText(String dropZoneText) {
this.dropZoneText = dropZoneText;
}
}