CODEWITHSUNDEEP
jsffile-uploadprimefacesjsf-2
Andrei Olar
Andrei Olar

Reputation: 2358

How to catch error/validation error on onchange for Primefaces fileupload

I am using passthrough to pass the onchange to the PF fileupload component. I want to collapse a panel and expand another when the user selects a file.

The problem I have is that I am always collapsing and expanding the panels. I don't want tot do this in case an error occures. And by error, I mean if I add an unsupported file type. If I do this, the PF error message will be displayed, but the what is inside the onchange will also get called.

I tried using the args but this is not working for passthrough...

How can I check for those specific errors and only execute what's inside the onchange if there aren't any? Or can I catch them somehow?

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if (tagName == 'INPUT' &amp;&amp; #{!cc.attrs.isLogo}) { if (!!value) {PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand();} }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

Update:

I even tried to get the DOM element where the messages are stored by class name like console.log($(PrimeFaces.escapeClientId('#{cc.clientId}:addPanel')).find('.ui-messages-error-summary'));

No success with this also, it doesn't find anything when using the onchange method, but it finds afterwards by manually running the above statement in the browser console. Seems like the onchange gets executed before PF modifies the markup. Or at least not all the markup...

Any suggestions?

Upvotes: 1

Views: 645

Answers (1)

Andrei Olar
Andrei Olar

Reputation: 2358

So, I am answering my own question. The working code look like the following:

<p:fileUpload disabled="#{userAccess.isDisabled()}"
    id="documentUpload"
    widgetVar="#{clientId}_documentUpload"
    label="#{msg['components.fileUpload.chooseDocument']}"
    uploadLabel="#{msg['components.fileUpload.uploadLabel']}"
    cancelLabel="#{msg['components.fileUpload.cancelLabel']}"
    invalidSizeMessage="#{nts['error.documentType.invalidFileSize']}"
    invalidFileMessage="#{cc.attrs.invalidFileTypeMessage}"
    fileUploadListener="#{cc.attrs.documentsHandler.handleFileUpload}"
    mode="advanced"
    dragDropSupport="true"
    oncomplete="PF('#{clientId}_addPanel').collapse();"
    update="#{cc.clientId}:displayPanel"
    process="@this"
    allowTypes="#{cc.attrs.allowedTypes}"
    styleClass="#{cc.attrs.styleClass}"
    sizeLimit="1000000"
    pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }">
    <f:attribute name="document" value="#{cc.attrs.documentsHandler.document}" />
</p:fileUpload>

Basically what I change was the passthrough line which now looks like this:

pt:onchange="if(tagName == 'DIV' &amp;&amp; !!id &amp;&amp; #{!cc.attrs.isLogo}) { if(!!PF('#{clientId}_documentUpload').files.length) { PF('#{clientId}_addPanel').collapse(); PF('#{clientId}_editPanel').expand(); } }"

It basically filters out only the the DIV elements which have an id, because I saw that the file only gets attached to one element in the DOM and by making use of the widgetvar and the condition if(!!PF('#{clientId}_documentUpload').files.length) it basically works.

I don't know if it's the best or right way to do it, but as I said, it does the job.

Upvotes: 1

Related Questions