Preview image in p:graphicImage before submitting to database primefaces

Question

In my application, I want the user to create a person, submit the form and on next page verify the details and then submit to db. The person can have an image as well. For simplicity sake I am only using two fields 1) name 2) file. I am not able to display the image on the "verify" page. The beans are session scoped, however when the FacesContext.getCurrentInstance() is not equal to PhaseId.RENDER_RESPONSE, the file size becomes 0. I am a JSF newbie, and unable to figure it out even after understanding that there are 2 separate calls while using p:graphicImage

Testfileupload.xhtml is below

        <h:outputText value="Person Name *" />
        <p:inputText value="#{personBean.name}"
                        required="true" 
                        requiredMessage="You must enter a Business Name"
                        id="name" />
        <p:message for="name" />

        <h:outputLabel for="image" value="Select Picture:" />
        <p:fileUpload id="image" value="#{personBean.file}" mode="simple" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
        <p:message for="image" />

        <p:commandButton value="Submit" action="#{personBean.addverifyBusiness}" ajax="false" /> 
</h:form>

PersonBean.java is below

public class PersonBean {

private String name;
private UploadedFile file;
private Person person = new Person();
private StreamedContent imagestream;


public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}


public UploadedFile getFile() {
    return file;
}

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

public Person getPerson() {
    return person;
}

public void setPerson(Person person) {
    this.person = person;
}

public StreamedContent getImagestream() {

    System.out.println("inside getImagestream() Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
    if (file != null) {
        System.out.println("file is not null");
        FacesContext context = FacesContext.getCurrentInstance();
        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
            System.out.println("phase = render_response Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
            imagestream = new DefaultStreamedContent();
            return imagestream;
        } else {
            ExternalContext externalContext = FacesContext.getCurrentInstance().getExternalContext();
            Map<String, Object> sessionMap = externalContext.getSessionMap();
            for(String key: sessionMap.keySet())
                System.out.println(key + " - " + sessionMap.get(key));
                System.out.println();
            PersonBean personBean = (PersonBean) sessionMap.get("personBean");
            Person person = personBean.getPerson();
            System.out.println("After casting to person");
            String filenamenew = person.getFile().getFileName();
            System.out.println("phase NOT render_response AFter cast Uploaded File Name Is :: "+filenamenew);
            Long filesize = person.getFile().getSize();
            System.out.println("phase NOT render_response AFter cast Uploaded File Size Is :: "+filesize);
            UploadedFile file1 = person.getFile();  
            System.out.println("phase NOT render_response Uploaded File Name Is :: "+file1.getFileName()+" :: Uploaded File Size :: "+file1.getSize());
            return new DefaultStreamedContent(new ByteArrayInputStream(file1.getContents()));
        } 

    } else {
        System.out.println("file is null");
        return new DefaultStreamedContent();
    }
}

    public void setImagestream(StreamedContent imagestream) {
          this.imagestream = imagestream;
       }
public String addverifyBusiness() {
    person.setName(name);
    person.setFile(file);
    return("testresult");  // Means to go to testresult.xhtml (since condition is not mapped in faces-config.xml)
}

}

Person.java is below

public class Person {
    private String name;
    private UploadedFile file;

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public UploadedFile getFile() {
    return file;
}

public void setFile(UploadedFile file) {
    this.file = file;
    System.out.println("inside Person setfile Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
}

}

testresult.xhtml is below

<h:body>
     <h:outputText value="Picture" />
                    <p:graphicImage value="#{personBean.imagestream}" >
                    <f:param name="file" value="#{personBean.person.file}" />
                    </p:graphicImage>


  </h:body>

Result is below inside Person setfile Uploaded File Name Is :: 202.JPG :: Uploaded File Size :: 2022045 inside getImagestream() Uploaded File Name Is :: 202.JPG :: Uploaded File Size :: 2022045 file is not null phase = render_response Uploaded File Name Is :: 202.JPG :: Uploaded File Size :: 2022045 inside getImagestream() Uploaded File Name Is :: 202.JPG :: Uploaded File Size :: 0 file is not null javax.faces.request.charset - UTF-8 personBean - com.myjsf.PersonBean@2784a989

After casting to person phase NOT render_response AFter cast Uploaded File Name Is :: 202.JPG phase NOT render_response AFter cast Uploaded File Size Is :: 0 phase NOT render_response Uploaded File Name Is :: 202.JPG :: Uploaded File Size :: 0 Mar 29, 2015 5:42:15 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest SEVERE: Error in streaming dynamic resource. Error reading 'imagestream' on type com.myjsf.PersonBean

score 1 · Answer 1 · edited Apr 06 '15 at 09:59

Change your public StreamedContent getImagestream() { ... } into this

public StreamedContent getImagestream2() {
    if( file != null ){
        return new DefaultStreamedContent(new ByteArrayInputStream(file.getContents()), file.getContentType());
    }else{
        return new DefaultStreamedContent();
    }
}

And on your result view, use this :

<p:graphicImage value="#{personBean.imagestream2}" >
                    <f:param name="file" value="#{personBean.person.file.fileName}" />
                </p:graphicImage>

Your image parameter is too heavy.

Wheelchair Geek · Answer 2 · 2015-04-02T13:17:20.990

I think primefaces is only able to render static content, that is if you are using the default pgraphic image. If you want your image rendered on a verify page before doing anything else you need an extra component of some type. I would recommend the AdvancedGraphicImageRenderer. I will attach link below. It worked for me without any problems. Code is almost self explanatory and easily modified.

https://github.com/rdebusscher/AdvancedGraphicImageRenderer

I forgot to mention that you might need to create an implementation of org.primefaces.model.StreamedContent that handles a byte array. If I remember correctly I don't think that the default streamed content is serializable. I ran into this error while developing a webflow application. If needed I can check into that. I think I still have the code for it.

Preview image in p:graphicImage before submitting to database primefaces

2 Answers2