PrimeFaces onAdd listener for fileupload not invoking

I am trying to display the each file in alert box before i implements my own logic as per my requirements. But its not working.

<h:head>

<script type="text/javascript">
    function displayEachFile(file,callback){
        alert(file);
    }
</script>
</h:head>

<h:body>
    <div class="card">
    <h:form name="download">
            <p:fileUpload value="#{fileBean.files}" mode="advanced" multiple="true" auto="true"
            listener="#{fileBean.handleFileUpload}" widgetVar="hello" onAdd="displayEachFile"/>
        </h:form>
    </div>
</h:body>

</html>

Documentation Updated: https://primefaces.github.io/primefaces/11_0_0/#/components/fileupload

onAdd has 3 params this, file, callback.

Running example: pf-8657.zip

This gives you the opportunity to inspect the file and if you decide its OK to add you call callback.

For example:

onAdd="onAddFile(file, callback);"

You could do something like only add files named primefaces.pdf for example.

function onAddFile(file, callback) {
   if (file.name === 'primefaces.pdf') {
       callback.call(this, file);
   }
}