How to get selected files from p:fileUpload after selection and before uploading

Question

I have an application with a file uploader and I would like to display some information from the selected files before the user uploads them.

E.g. The user selects a file to upload, the application, client side, then grabs that file and reads some information from it to display to the view. Then if it is what the user expects to see they can hit upload.

Is there a way to call a method in the backing bean when a file is selected and pass it that file, or does PrimeFaces not let this happen?

index.xhtml

<h:form id="uploadform" prependId="false" enctype="multipart/form-data">
    <p:outputPanel id="container">
        <center>
            <p:fileUpload fileUploadListener="#{uploadBean.handleFileUpload}" mode="advanced"
                    dragDropSupport="false" allowTypes="/(\.|\/)(csv|xlsx)$/" update="messages"/>

            <p:growl id="messages" showDetail="true" />

        </center>
    </p:outputPanel>                
</h:form>

UploadBean.java

import org.apache.poi.util.IOUtils;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ViewScoped
@ManagedBean(name = "uploadBean")
public class NetezzaUploadBean implements java.io.Serializable {

    private static final long serialVersionUID = 1L;

    private UploadedFile file = null;

    @PostConstruct
    public void init() {
    }

    public void getFileBeforeSubmit() {
        //Where I want to do some work with the file    
    }

    public void handleFileUpload(FileUploadEvent event){
        FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);
    }

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile uploadedFile) {
        this.file = uploadedFile;
    }
}

Answer 1

PrimeFaces p:fileUpload seems to have a great undocumented feature where you can make use of the native file input 'onAdd' event (or sort of). I found this in the source (which is open ;-)) of the 2-fileUpload.js file

if($this.cfg.onAdd) {
    $this.cfg.onAdd.call($this, file, function(processedFile) {
       file = processedFile;
       data.files[0] = processedFile;
       this.addFileToRow(file, data);
    });
}

The cfg property from $this can be accessed via

PF('myWidgetId').cfg

And if you declare a function upfront like

function myOnAddHandler(file) {
    console.log(file);
}

And add it to the widget with

PF('myWidgetId').cfg.myOnAddHandler;

You can select a file and before uploading see it logged in the console

File { name: "myImage.PNG", lastModified: 1533756086560, webkitRelativePath: "", size: 38344, type: "image/png" }

You can then extend this to use the HTML5 File API and read it

function myOnAddHandler(file) {
    var reader = new FileReader(); 
    reader.onload = function(readerEvt) { 
        var binaryString = readerEvt.target.result;
        console.log(btoa(binaryString));
    };
    reader.readAsBinaryString(file);
}

PrimeFaces itself uses this sort of too in the related addFileToRow to show the preview

After looking in more of the java code of PrimeFaces, it might even be that instead of doing PF('myWidgetId').cfg.myOnAddHandler;, you could do <p:fileUpload onAdd="myOnAddHandler" .... /> I unfortunately do not have the time to test this right now but it might work.