Загрузка файла JSF путем перетаскивания файла в любую точку страницы

Question

В настоящее время я использую функцию перетаскивания & компонента «Первичные файлы». Он работает нормально, но я хочу загрузить файлы напрямую, перетащив их куда угодно на мою страницу, без необходимости нажатия кнопки.

Я попытался это:

$('.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 в файл «Первичные файлы» и отправить файлы программно без использования 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", чтобы это осуществить.

Update:

Выполните следующие JavaScript сразу после рендеринга DIV загрузки файла. Затем вы можете удалить разрешенные типы файлов в любом месте страницы.

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