Display p:fileUpload invalidFileMessage outside component inside e.g. p:messages or p:growl

问题

I have Facelets file:

 <h:body>
      <ui:composition template="....">
        <h:form id="templateEditor">
                <p:growl id="growl" sticky="true" showDetail="true" autoUpdate="true" widgetVar="growl"/>
                 <h:outputScript library="js" name="ckeditor.js" target="head" />
                <body onload="onloadInput();"/>
          <p:tabView>
            <p:tab title="...." >
               <p:datagrid id="..." />
                <p:fileUpload  id="fileUpload" skinSimple="true" label="..." auto="true" allowTypes="/(\.|\/)(jpg|jpeg|png|bmp)$/" sizeLimit="5000000"
                                    invalidFileMessage="#..." fileUploadListener="..." update="pictureGrid :templateEditor:growl"/>
              </h:panelGroup>
            </p:tab>
          </p:tabView>
        </h:form>
       </ui:composition>
    </h:body>

Js.

<script>
function saveData(){
                document.getElementById('templateEditor:documentContent').value = CKEDITOR.instances.editor1.getData();
            }

            function onloadInput(){
                CKEDITOR.instances.editor1.setData(document.getElementById('templateEditor:documentContent').value);
            }

            function setHiddenField(){
                document.getElementById("hiddenId").value = FIELDS[1].value;
            }

            /* jQuery --- displays invalid file upload message outsite tabView*/
            (function($) {
                var originalShowFunction = $.fn.show;
                $.fn.show = function() {
                    this.trigger("show");
                    return originalShowFunction.apply(this, arguments);
                };
            })(jQuery);

            $(document).on("show", ".ui-fileupload-content>.ui-messages", function() {
                var $messages = $(this);
                $messages.appendTo($messages.closest("form"));
            });

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

</script>

When message is displayed, it apears inside <p:fileUpload> component. What I want to achieve is, this message to be displayed outside the tab, in the <h:form>.

Second question would be, how to display this message using <p:growl>.

来源：https://stackoverflow.com/questions/34374104/display-pfileupload-invalidfilemessage-outside-component-inside-e-g-pmessages

标签

jsf

file-upload

jsf-2

primefaces

growl