JSF Fileupload durch Ziehen der Datei irgendwo auf die Seite

Question

Ich verwende derzeit die Drag & Drop-Funktion von Primefaces fileUpload-Komponente. Es funktioniert einwandfrei, aber ich möchte Dateien direkt hochladen, indem ich sie irgendwo auf meine Seite ziehe, ohne auf eine Schaltfläche klicken zu müssen. diese

Ich habe versucht:

$('.dropzone').on({ 
    'dragover dragenter': function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
    }, 
    'drop': function (e) { 
     var dataTransfer = e.originalEvent.dataTransfer; 
     if (dataTransfer && dataTransfer.files.length) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      $.each(dataTransfer.files, function (i, file) { 

       uploadFile([{"name": "filename", "value": file.name}]); 
      }); 
     } 
    } 
}); 

<p:remoteCommand name="uploadFile" action="#{bean.uploadFile()}" /> 

public void uploadFile(){ 
    String filename = 
     FacesContext.getCurrentInstance() 
     .getExternalContext().getRequestParameterMap().get("filename"); 
} 

Das Problem ist, dass dies für den Dateinamen funktioniert, aber nicht für die Datei selbst. Ist das der richtige Ansatz, oder gibt es eine Möglichkeit, die files-Liste an Primefaces fileUpload weiterzuleiten und die Dateien programmgesteuert ohne Verwendung der GUI-Komponente zu senden?

Answer 1

Haben Sie versucht dragDropSupport="true"?

<p:fileUpload fileUploadListener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="true" 
         update="messages" sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" /> 

Es funktioniert sehr gut für mich.

Answer 2

Es ist bereits in der Vitrine. http://www.primefaces.org/showcase/ui/file/upload/auto.xhtml

Benötigen Sie auto="true", um dies zu tun.

Update:

Führen Sie Javascript folgenden kurz nach der Datei-Upload div Rendering. Dann können Sie erlaubte Dateitypen überall auf der Seite ablegen.

$('.ui-fileupload').fileupload({ 
     dropZone: $(document) 
});