How to add listener to Choose button in p:fileUpload

Question

Is it possible to add a listener to "Choose" button in FileUpload component?

I use p:fileUpload in advanced mode.

I went through the documentation, it only supports fileUploadListener which is triggered after the "Upload" button clicked.(tried actionListener, validationListener too)

Version of PrimeFaces is 5.3.

Definition of p:fileUpload:

<p:fileUpload
                            fileUploadListener="#{ipchYonetimiController.handleFileUpload}" 
                            widgetVar="aras"
                            mode="advanced" dragDropSupport="false" update="@this toplumsgs"
                            sizeLimit="100000" fileLimit="1" 
                            cancelLabel="İptal et" allowTypes="/(\.|\/)(xlsx)$/"
                            invalidSizeMessage="Dosya boyutu çok büyük"
                            invalidFileMessage="Dosya formatı xlsx olmalı"
                            fileLimitMessage="Sadece bir dosya yükleyebilirsiniz" />

Here is the image why I need it:

I basically want to clear validation error when the user clicks the choose button. Since the choose button is wrapped in fileUpload component, can't assign a listener to it.

Tried to tweak the code in this link and add a listener to button, but no success:

 PF('aras').chooseButton.addEventListener(...)

How to disable Choose button in PrimeFaces FileUpload until the upload is complete

nope, The problem is, I check if file has valid contents or not in "handleFileUpload". And if there is any problem, I throw an validation exception like this one.(Value should be numeric in row 1 in english). Then if the user corrects the xlsx file and "choose" it again(not upload, just choose), that validation error should be cleared. Basically, I just want to clear all validation error when user clicks the "choose" button. Since I didn't create it(it belongs to fileUpload component), I can't assign a listener to it. — sarah
Keep in mind that client-side everything is html/css/javascript. So you can assign (client-side) listeners to it like you can in plain html as the answer shows. This is true for almost everything! — Kukeltje

Jaqen H'ghar Jaqen H'ghar · Accepted Answer · 2017-05-24T08:31:06

Could you try this - it works for me:

<p:fileUpload id="fileupload" ..... />

<script>
    $(document).on("click", ".ui-fileupload input[type=file]", function(event){
        $(this).closest('.ui-fileupload').find('.ui-icon-close').trigger('click');
    });
</script>

How to add listener to Choose button in p:fileUpload

2 Answers