p:fileUpload doesn't work with pe:blockUI in same page

Question

The component does not work correctly when on the same page using the component

The error occurs after loading the first file javascript error occurs and then can not continue using the file upload component

The blockUI element is like this:

<pe:blockUI widgetVar="uploadPrBroBloc" block="importPanel"
                        trigger=":pim:uploadProBroFile">
                        <em class="fa fa-spinner fa-spin"></em> #{msgs.UPLOADING}
                    </pe:blockUI>

The fileUpload UI is :

<p:fileUpload id="uploadProBroFile" auto="true"
              styleClass="uploadImage"
              fileUploadListener="#{importPackageController.handleProductBrowserFileUpload}"
              label="#{msgs.BTN_UPLOAD_FILE}" allowTypes="/(\.|\/)(XLSX|xlsx)$/"
              update="proBro_file_name" />

i have done some search, the problem is that the use of the "trigger" attribute on the element - seems to have a conflict with it

Does any one have an idea, thanks in advance !

Answer 1

I have found an idea, enable and disable the block in the p:fileUpload UI events instead of setting a trigger in the blockUI for it:

The p:fileUpload will look like:

<p:fileUpload id="uploadProBroFile" auto="true"
              onstart="PF('uploadPrBroBloc').block()" 
              oncomplete="PF('uploadPrBroBloc').unblock()"
              styleClass="uploadImage"
              fileUploadListener="#{importPackageController.handleProductBrowserFileUpload}"
              label="#{msgs.BTN_UPLOAD_FILE}" allowTypes="/(\.|\/)(XLSX|xlsx)$/"
              update="proBro_file_name" />

The blockUI element will not use a trigger :

            <pe:blockUI widgetVar="uploadPrBroBloc" block="importPanel">
                <em class="fa fa-spinner fa-spin"></em> #{msgs.UPLOADING}
            </pe:blockUI>

Hope this help anyone having the same problem !