JSFファイルをページ内の任意の場所にドラッグしてファイルアップロード

Question

私は現在、プライムファイルfileUploadコンポーネントのドラッグ&ドロップ機能を使用しています。それは正常に動作しますが、私が望むのは、ボタンをクリックする必要なしに、ファイルをどこにでも私のページのどこにでもドラッグすることでファイルを直接アップロードすることです。

$('.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"); 
} 

問題は、これがなく、ファイル自体のために、ファイル名のために働くということです。

は、私はこれを試してみました。これはとにかく正しいアプローチですか、 filesリストをPrimefaces fileに転送する方法がありますか？GUIコンポーネントを使用せずにファイルをプログラムでアップロードして提出しますか？

Answer 1

dragDropSupport="true"を試しましたか？

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

非常にうまく動作します。

Answer 2

すでにショーケースにはあります。 http://www.primefaces.org/showcase/ui/file/upload/auto.xhtml

これを行うには、auto="true"が必要です。

更新：

だけでファイルアップロードのdivをレンダリングした後、次のJavaScriptを実行します。 次に、許可されたファイルタイプをページのどこにでもドロップできます。

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