Preview image in p:graphicImage before submitting to database primefaces - file-upload

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

Answer 1

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.

Answer 2

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.