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, May 24 '17 at 07:52
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, May 24 '17 at 12:59

Jaqen H'ghar · Accepted Answer · 2017-05-24T12:33:15.020

3

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>

edited May 24 '17 at 12:33

answered May 24 '17 at 08:31

Jaqen H'ghar

4,305
2
14
26

well, I tried it and it does not work, printed console.log in it, so function is definitely called. I also tried it after ui:define(start tag) and the very last of the page(before ending tag of ui define). This popup is in p: dialog->p:panel->hform. Can it cause the problem? I am going to accept it anyway as it is useful even it won't work. – sarah May 24 '17 at 11:13
1

You need to make sure that the part at the beginning of the function points to the id of your fileupload . Be aware of the id of your form, you need to prepend it like that: $('[id$=uploadform\\:fileupload]') (note the escape of the colon). You shouldn't accept answer which don't work for you btw :) – lastresort May 24 '17 at 12:04
1

Sorry not sure where to put it then, in standalone page it works for me both in h:head or just before end body. Maybe as BalusC does here: https://stackoverflow.com/questions/11027285/javascript-does-not-work-under-jsf-template. I changed a little bit so it will only click the close-icons within the relevant p:fileUpload (and not all) – Jaqen H'ghar May 24 '17 at 12:10
3

@lastresort The $ is used exactly to avoid having to prepend with the form id. I don't like the syntax you wrote. But it requires that you give it a unique id yourself – Jaqen H'ghar May 24 '17 at 12:13
1

@sarah Sorry I've changed it again, I expect you want this on all your fileUploads which it should do, also those rendered "in the future". I hope you can put it in the template now (or your custom js-file) – Jaqen H'ghar May 24 '17 at 12:36

score 1 · Answer 2 · edited Aug 22 '23 at 11:46

1

Instead of tackling with file upload component you can set time out on validation message. Please see: How to hide <p:messages> after it displayed the messages

second option will be to use growl for the error messages.

EDIT: When the user clicks on the upload button the onstart event is fired so you can use it.

<p:fileUpload onstart="PF('validationMsg').hide()" />

edited Aug 22 '23 at 11:46

Jasper de Vries

19,370
6
64
102

answered May 24 '17 at 07:28

umaair_653

113
10

thanks for your answer, I upvoted it since the time function is indeed useful. However, it does not meet my requirement right now. I do not want the message disappear before clicking. Also, showing validation error on top of popup is standart for this project, growl does not do it. Thanks for your opinion anyways and please share if you have any other idea or knowledge. – sarah May 24 '17 at 07:58
well, I need it in "Choose" button. Unfortunately, onstart is only fired when it starts uploading. – sarah May 24 '17 at 11:22

score 0 · Answer 3 · answered Aug 21 '23 at 20:30

0

To capture that first file chooser, try this:

$(document).on("input", "[id*='idwithwildcard']", function(event){
                           console.log('input achieved');                          
                        });

answered Aug 21 '23 at 20:30

nettie

628
1
11
23

How to add listener to Choose button in p:fileUpload

3 Answers3