Ładowanie pliku JSF przez przeciągnięcie pliku w dowolne miejsce na stronę

Question

Aktualnie używam funkcji upuszczania & upuszczania składnika Primefaces fileUpload. Działa dobrze, ale chcę przesłać pliki bezpośrednio, przeciągając je w dowolne miejsce na moją stronę, bez konieczności klikania przycisku.

Próbowałem to:

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

Problemem jest to, że pracuje dla pliku, ale nie dla samego pliku. Czy jest to właściwe podejście, czy jest jakiś sposób na przesłanie listy do pliku Primefaces? Przesyłaj i prześlij pliki programowo bez użycia komponentu gui?

Answer 1

Czy próbowałeś dragDropSupport="true"?

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

Działa to bardzo dobrze dla mnie.

Answer 2

Jest już tam w gablocie. http://www.primefaces.org/showcase/ui/file/upload/auto.xhtml

Potrzebujesz auto="true", aby to zrobić.

Aktualizacja:

Wykonaj następujące javascript tuż po renderingu div wysyłania plików. Następnie możesz upuszczać dozwolone typy plików w dowolne miejsce na stronie.

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