1

Please see this question (and answer) for the detailed idea. Here is a basic one (Please run this example, if it is possible to you. You can simple click on the label and start a (invalid!) file upload):

I got a <h:outputLabel> to invoke an invisible <p:fileUpload>. It is working fine. Now, the the error message of those is displayed above (Thanks to the answer provided by BalusC). 

<h:form>
    <b:commandButton id="c" value="Invoke me" ajax="true"
        update="bootsfaces_message" action="#{bean.message}" />
    <p:fileUpload id="file-input" widgetVar="file-input" update="@form"
        auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="10"
        invalidSizeMessage="invalid size message"
        fileUploadListener="#{bean.image}"
        invalidFileMessage="invalid format" styleClass=" ui-helper-hidden" />

    <h:outputLabel for="file-input_input"
        onclick="PF('file-input').messageContainer.appendTo($('#bm'));">
        LABEL
    </h:outputLabel>

    <h:outputText value="#{bean.file.fileName}" />
    <br />
    <h:outputText value="#{bean.file.size}" />
</h:form>

So for now, the error message is displayed, but with the theme of <p:message>. But the message should always looks like a message from BootsFaces. You can compare it with a click on the button Invoke me. Just add following code to a Manageed Bean:

public void message() {
    FacesContext.getCurrentInstance().addMessage(
            "",
            new FacesMessage(FacesMessage.SEVERITY_ERROR, null,
                    "test message"));

}

As pointed out in the answer, JavaScript is a possible solution to manipulate the DOM Tree. Well, that is not what I want (just the worst case solution).

Is there any BootsFaces specific solution for those kind of problems?

Community
  • 1
  • 1
alexander
  • 1,191
  • 2
  • 20
  • 40
  • The HTML markup of message is hardcoded in `fileupload.js`. This is thus not possible without manipulating it via JS and/or CSS. – BalusC Aug 04 '15 at 15:46
  • A completely different alternative would be to drop client side validation and do it entirely server side, but the payoff is that the file has to be uploaded in its entirety before server side validation could run. I think you're already aware of this for long. – BalusC Aug 04 '15 at 16:08
  • What about facepaint? The HTML markup of the PrimeFaces message isn't identical to the markup of BootsFaces, but I guess you can use some CSS to make the difference vanish. You can find the sourcecode of the error message at https://github.com/primefaces/primefaces/blob/master/src/main/resources/META-INF/resources/primefaces/fileupload/fileupload.js, line 2070ff. – Stephan Rauh Aug 04 '15 at 21:36
  • @StephanRauh I know that. Well, I have no idea what the _better_ way is, here. Guess there are only those two options, at the moment I will at a server-side solution, because I really have no real JS skills. We will see. – alexander Aug 05 '15 at 05:51
  • 1
    Another alternative when dropping client side validation would be to use JS to extract the file size and name and then pass those as individual parameters via `` to bean which in turn performs the necessary validation and adds the faces messages. As to lack of JS skills, start here http://htmldog.com/guides/javascript – BalusC Aug 05 '15 at 08:11
  • It seems, that this question is not that bad as I thought. Feel free to answer it, there are many approaches. I will have a look and this tutorial in my (rare) sparetime, thanks. – alexander Aug 05 '15 at 08:25

0 Answers0