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

Answer 1

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>