jsf - español - primefaces p fileupload multiple

Cómo mostrar p: fileUpload invalidFileMessage en p: growl

Question

Estoy usando <p:fileUpload> que está restringido solo a PDF. Sin embargo, invalidFileMessage muestra dentro del componente <p:fileUpload> . ¿Cómo puedo mostrarlo en <p:growl> lugar?

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

Answer 1

Bien, agregue una etiqueta de mensaje en su página algo así como:

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

Y en la actualización de carga de archivos = "@ esto, prueba" y su mensaje se mostrará en p: mensajes. Puedes cambiar fácilmente en growl funciona de la misma manera.

Mire en el escaparate de Primefaces para más ejemplos

Answer 2

Busqué un ejemplo en Primefaces showcase y encontré esto. La página real:

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

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

Y la clase de controlador de carga de archivos:

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

Tal vez algo a tener en cuenta sobre cómo mostrar mensajes en Primefaces

Answer 3

No puedes manejar este lado del servidor. El tipo de archivo se valida en el lado del cliente sin presionar ningún código en el lado del servidor. Por lo tanto, cualquier sugerencia que sugiera crear FacesMessage manual y / o agregar explícitamente <p:message(s)> son poco reflexivos y no probados.

Deberías usar jQuery. Soluciona todo

Basado en el código fuente de fileupload.js , lo mejor es escuchar en el evento ficticio del contenedor de mensajes y luego mover el contenedor de mensajes al final del formulario.

Primero extienda $.show() para activar realmente el evento show .

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

Luego, simplemente cree un evento listener on show que básicamente se ejecuta cuando aparecen los mensajes de carga de archivos y luego analiza todos los mensajes y utiliza la función renderMessage() de la API <p:growl> JS. El siguiente ejemplo asume que tienes un <p:growl widgetVar="growl"> en algún lugar de la misma página.

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