v10 Advanced multiple file upload example that works?

[karlkras]

Code: Select all

        
        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>10.0.0</version>
        </dependency>

I'm back!
Now that v10 is officially released, I was hoping that I would be able to find some support to implement a working advanced multiple fileupload control implementation, but alas can find no such example.
I've been trying a few things, but all attempts have fallen short.
Can someone point me to an actual v10 (not earlier since this posed other problems that I was hoping 10 would address) example that I can work from? I've resorted to using a "basic" version of the control, but is, well, basic.

thanks!
Karl

[Melloware]

Isn't this example what you are looking for?

https://www.primefaces.org/showcase/ui/ ... iple.xhtml

Is there something missing there?

[karlkras]

Isn't this example what you are looking for?

https://www.primefaces.org/showcase/ui/ ... iple.xhtml

Is there something missing there?

Thanks... I'll give it a try. The problem is, I can't seem to find these examples in any structured manner.
I've resorted to google, and all it brought up was the "basic" example and find no such functionality to search for showcase examples in the primefaces domain.
How do I go about finding these myself?

[karlkras]

the controller is showing all of this stuff:

Code: Select all

public class FileUploadView {

    private UploadedFile file;
    private UploadedFiles files;

    public UploadedFile getFile() {
        return file;
    }

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

    public UploadedFiles getFiles() {
        return files;
    }

    public void setFiles(UploadedFiles files) {
        this.files = files;
    }

    public void upload() {
        if (file != null) {
            FacesMessage message = new FacesMessage("Successful", file.getFileName() + " is uploaded.");
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

    public void uploadMultiple() {
        if (files != null) {
            for (UploadedFile f : files.getFiles()) {
                FacesMessage message = new FacesMessage("Successful", f.getFileName() + " is uploaded.");
                FacesContext.getCurrentInstance().addMessage(null, message);
            }
        }
    }

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

    public void handleFilesUpload(FilesUploadEvent event) {
        for (UploadedFile f : event.getFiles().getFiles()) {
            FacesMessage message = new FacesMessage("Successful", f.getFileName() + " is uploaded.");
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }
}

and the xhtml code is this:

Code: Select all

<div class="card">
    <h:form>
        <p:fileUpload listener="#{fileUploadView.handleFileUpload}" mode="advanced" dragDropSupport="false"
                      multiple="true" update="messages" sizeLimit="100000" fileLimit="3"
                      allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>

        <p:growl id="messages" showDetail="true" keepAlive="true"/>
    </h:form>
</div>

Which implies that all it's using is this:

Code: Select all

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

?

What's the point of all of the other methods and class members that this is showing:

Code: Select all

    private UploadedFile file;
    private UploadedFiles files;

    public UploadedFile getFile() {
        return file;
    }

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

    public UploadedFiles getFiles() {
        return files;
    }

    public void setFiles(UploadedFiles files) {
        this.files = files;
    }

    public void upload() {
        if (file != null) {
            FacesMessage message = new FacesMessage("Successful", file.getFileName() + " is uploaded.");
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

    public void uploadMultiple() {
        if (files != null) {
            for (UploadedFile f : files.getFiles()) {
                FacesMessage message = new FacesMessage("Successful", f.getFileName() + " is uploaded.");
                FacesContext.getCurrentInstance().addMessage(null, message);
            }
        }
    }
    
    public void handleFilesUpload(FilesUploadEvent event) {
        for (UploadedFile f : event.getFiles().getFiles()) {
            FacesMessage message = new FacesMessage("Successful", f.getFileName() + " is uploaded.");
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

are these just here for other examples? How much of any of this is required to support the advanced multiple file upload?
Yes, I could again go through the exercise of trying to figure this out by the process of code elimination, but why not have a specific example of the exact topic at hand?

This is a bit more confusing that it really needs to be unless of course all of this stuff is somehow involved, which I really doubt.

[Melloware]

Yes the same Controller is used in multiple FileUpload examples on the showcase.

[karlkras]

And as provided, this example does not work with multiple files... while I can select multiple, the handler only addresses the first one selected.
If someone were to actually attempt to run this as written, you too should find this to be the case.
I'm pretty sure at some level this was designed to actually work, so please direct me to the support from someone with experience on how exactly this works please, if such a person exists.

As the example handlers imply, there is one (which the multiple example is referencing) that handles one file:

Code: Select all

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

and another:

Code: Select all

    public void handleFilesUpload(FilesUploadEvent event) {
        for (UploadedFile f : event.getFiles().getFiles()) {
            FacesMessage message = new FacesMessage("Successful", f.getFileName() + " is uploaded.");
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

which I would assume may be what the example should be using as the handler? If so, when I attempt to point at it, I get an error that the handler doesn't exist (which it does, but I'm guessing I need some added configuration somewhere to use it?)

thanks,
Karl

[tandraschko]

Just carefully read the docs (we know they are not perfect, feel free to improve here via PR ): https://primefaces.github.io/primefaces ... fileupload

In advanced mode, it does not send all files in one request, but always uses a new request for each file.

However, in simple mode, it is possible to get all updated files at once via the UploadedFiles model:

[tandraschko]

i reworked the docs a bit now

[karlkras]

In advanced mode, it does not send all files in one request, but always uses a new request for each file.

However, in simple mode, it is possible to get all updated files at once via the UploadedFiles model:

Yes, I understand this, but with this example it doesn't (from my testing) ever collect the full set of files and the handler is called exactly once.
I would have expected it called n number of times (n = number of files selected).
I would have expected the

Code: Select all

FilesUploadEvent

class to have been involved in this case, but as explained, when attempting to use it I get the "handler not defined" error.

I'll be happy to contribute to the example once I can get my arms around what the correct usage is.

Thanks!

[tandraschko]

As you can see in the docs, FilesUploadEvent and UploadedFiles only works in simple mode.
When you use multiple=true && advanded, which is your case, only listener with FileUploadEvent should be used and this should be called multiple times.
When this doesnt work, please create a issue with reproducer.