Show multiple message / growl message for fileupload for PrimeFaces

Question

I want to show x number of message/growl based on the files that were uploaded via the fileuploader in primeface.

Currently, it will only show the latest message. The rest will be not be shown. Is there anyway that the show last can be bypass? or another alternative?

So if I upload 4 files. Be it successful or not, I want it to show 4 messages. 1 for each files.

index.xhtml:

<h:form id="form">
        <p:messages id="messages" autoUpdate="true" showDetail="true" closable="true" />

        <p:fileUpload fileUploadListener="#{fileUploadAction.upload}"
            mode="advanced" allowTypes="/(\.|\/)(asc)$/" dragDropSupport="true" update="messages" />
</h:form>

FileUploadAction.java:

public void upload(FileUploadEvent event)
    {   
        String filename = event.getFile().getFileName();

        try
        {
            copyFile(filename, event.getFile().getInputstream());

            FacesContext.getCurrentInstance().addMessage(filename, new FacesMessage(FacesMessage.SEVERITY_INFO, "msg.header", filename + " is uploaded."));
        }
        catch (IOException e)
        {
            FacesContext.getCurrentInstance().addMessage(filename, new FacesMessage(FacesMessage.SEVERITY_ERROR, "err.header", e.getLocalizedMessage()));
        }
    }

    public void copyFile(String fileName, InputStream in)
    {
        try
        {
            // write the inputStream to a FileOutputStream
            OutputStream out = new FileOutputStream(new File(PropertiesUtil.LOCAL_PATH + fileName));

            int read = 0;
            byte[] bytes = new byte[1024];

            while ((read = in.read(bytes)) != -1)
            {
                out.write(bytes, 0, read);
            }

            in.close();
            out.flush();
            out.close();
        }
        catch (IOException e)
        {
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "err.header", e.getLocalizedMessage()));
        }
    }

do you mean showing more than one message when you upload your file ?!? — Yagami Light, Jun 22 '17 at 08:17
@YagamiLight Yes. like if i upload 4 files and 4 files are successfully. I wna to show 4 messages. 1 for each file. — shadow, Jun 22 '17 at 08:23
first of all if you want to make a multiple upload file please read the [Primefaces Upload Multiple File Example](https://www.primefaces.org/showcase/ui/file/upload/multiple.xhtml) after that tell me if the issue still remain — Yagami Light, Jun 22 '17 at 08:43
@YagamiLight I actually followed the showcase when i was doing this. It is showing the same results. i.e It is showing only 1 message when i upload say 3 files and is only showing the last file. — shadow, Jun 22 '17 at 08:59

Hatem Alimam · Accepted Answer · 2017-06-22T09:15:34.790

Since the fileUpload is updating the messages or the growl on each file upload, the previous message is being cleared from the DOM, especially if the requests are being served fast.

To keep the growl intact, and show multiple messages you may do the following:

First the growl component:

<p:growl widgetVar="growlWV" showDetail="true" />

make sure you define the widgetVar, will use it later.

fileUpload:

<p:fileUpload fileUploadListener="#{fileUploadAction.upload}"
        mode="advanced" allowTypes="/(\.|\/)(asc)$/" dragDropSupport="true" />

make sure you are not updating the growl in the fileUpload.

Second in the upload handling method:

RequestContext.getCurrentInstance().execute("PF('growlWV').renderMessage("
            + "{\"summary\":\"summary goes here\""
            + ", \"detail\":\"" + event.getFile().getFileName() + "\""
            + ", \"severity\":\"warn\"})");

You may define your own js function with a less messy syntax, more tidy then call the above js instead of all these +\ in the execute, but I guess you got the idea.

Related questions: Show growl using Javascript

Show multiple message / growl message for fileupload for PrimeFaces

1 Answers1