CODEWITHSUNDEEP
jsffile-uploadprimefacesmessagegrowl
Kishor Prakash
Kishor Prakash

Reputation: 8171

How to display p:fileUpload invalidFileMessage in p:growl

I'm using <p:fileUpload> which is restricted to PDF only. However, the invalidFileMessage shows inside the <p:fileUpload> component. How can I show it in <p:growl> instead?

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

Upvotes: 9

Views: 11455

Answers (3)

BalusC
BalusC

Reputation: 1109292

You can't handle this server side. The file type is validated at client side without hitting any code in server side. So, any suggestions which suggest to manually create FacesMessage and/or explicitly add <p:message(s)> are unthoughtful and untested.

You should use jQuery. It solves everything.

Based on the fileupload.js source code, your best bet is to listen on the fictional show event of the message container and then move the messages container to end of the form.

First extend $.show() to actually trigger the show event.

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

Then simply create a listener on show event which basically runs when file upload messages appear and then parse every single message and use the renderMessage() function of the <p:growl> JS API. The below example assumes that you've a <p:growl widgetVar="growl"> somewhere in the same page.

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

Upvotes: 11

ClydeFrog
ClydeFrog

Reputation: 1012

Looked up an example in Primefaces showcase and found this. The actual page:

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

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

And the file uploader controller class:

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

Maybe something to keep in mind on how to display messages in Primefaces

Upvotes: -2

Tankhenk
Tankhenk

Reputation: 634

Well add an message tag in your page something like:

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

And in fileupload update="@this,test" and your message will be displayed in p:messages. You can change easly in growl works the same.

Look in the primefaces showcase for more examples

Upvotes: -1

Related Questions