Wie p: fileUpload anzeigen invalidFileMessage in p: Growl

Question

Ich verwende <p:fileUpload>, die nur auf PDF beschränkt ist. Die invalidFileMessage zeigt jedoch innerhalb der <p:fileUpload> Komponente. Wie kann ich es stattdessen in <p:growl> zeigen?

<p:messages id="test" autoUpdate="true" /> 

Und in Fileupload update = "@ dieser, Test" wird Ihre Nachricht in p angezeigt:

<p:fileUpload allowTypes="/(\.|\/)(pdf)$/" 
       invalidFileMessage="File is Invalid. Only PDF files are allowed" /> 

Answer 1

Well einen Message-Tag in Ihrer Seite etwas wie hinzufügen Nachrichten. Sie können einfach im Growl das gleiche ändern.

Blick in den primefaces präsentieren, um weitere Beispiele

Answer 2

Sah ein Beispiel in Primefaces Vitrine und fanden diese. Die tatsächliche Seite:

<p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}" 
       mode="advanced" 
       update="messages" 
       allowTypes="/(\.|\/)(pdf)$/"/> 

<p:growl id="messages" showDetail="true"/> 

Und der Uploader Controller-Klasse-Datei:

public void handleFileUpload(FileUploadEvent event) { 
    FacesMessage msg = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded."); 
    FacesContext.getCurrentInstance().addMessage(null, msg); 
} 

Vielleicht auf daran etwas zu halten, wie

Nachrichten in Primefaces anzuzeigen

Answer 3

Sie können diese Server-Seite nicht verarbeiten . Der Dateityp wird auf der Clientseite validiert, ohne auf der Serverseite Code zu treffen. Daher sind alle Vorschläge, die vorschlagen, FacesMessage manuell zu erstellen und/oder <p:message(s)> explizit hinzuzufügen, unbedacht und ungetestet.

You should use jQuery. It solves everything.

Basierend auf dem fileupload.js Quellcode, ist Ihre beste Wette auf das fiktive show Ereignis des Nachrichten Container hören und dann die Nachrichten Container bewegen des Formulars zu beenden.

Erweitern Sie zuerst $.show(), um das Ereignis show auszulösen.

(function($) { 
    var originalShowFunction = $.fn.show; 
    $.fn.show = function() { 
     this.trigger("show"); 
     return originalShowFunction.apply(this, arguments); 
    }; 
})(jQuery); 

Dann einfach einen Zuhörer auf show Ereignis erstellen, die im Grunde läuft, wenn Nachrichten Datei-Upload erscheinen und dann jede einzelne Nachricht analysieren und die renderMessage() Funktion des <p:growl> JS-API verwenden. Das folgende Beispiel geht davon aus, dass Sie irgendwo auf der gleichen Seite einen <p:growl widgetVar="growl"> haben.

$(document).on("show", ".ui-fileupload-content>.ui-messages", function() { 
    $(this).children().hide().find("li").each(function(index, message) { 
     var $message = $(message); 
     PF("growl").renderMessage({ 
      summary: $(".ui-messages-error-summary", $message).text(), 
      detail: $(".ui-messages-error-detail", $message).text() 
     }); 
    }); 
});