How to maintain state between page redirection JSf 2.0 - jsf-2

Question

I am making pages where you can upload pictures and then preview them. Both upload and preview work fine. But the problem is if I upload images, then preview it and then come back to the upload images page, the images are gone. Here is my code
<h:panelGrid columns="4"
border=""
width="20%"
style="position: absolute; top: 50px;"
columnClasses="asteriskColumns, nameColumns" >
<h:outputText value="*" />
<h:outputText value="Map: " />
<p:fileUpload id="cityMap"
description="Image"
update="mapImage messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="mapImage"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false" />
<h:outputText value="*" />
<h:outputText value="Image1: " />
<p:fileUpload id="cityImage1"
description="Image"
update="city_Image1 messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="city_Image1"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false" />
<h:outputText value="*" />
<h:outputText value="Image2: " />
<p:fileUpload id="cityImage2"
description="Image"
update="city_Image2 messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="city_Image2"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false" />
Here is my bean
#ManagedBean
#ViewScoped
#SessionScoped
public class CityDetail {
private StreamedContent image;
private ArrayList images;
private ArrayList imageNames;
private String imagePath = "/resources/images/Untitled.jpg";
private String imagePath1 = "/resources/images" + "/";
public CityDetail() {
images = new ArrayList();
images.add(null);
images.add(null);
images.add(null);
images.add(null);
images.add(null);
imageNames = new ArrayList();
imageNames.add("");
imageNames.add("");
imageNames.add("");
imageNames.add("");
imageNames.add("");
// Getting session ID from seession variable that is set in the City_Review Page
cityID = Integer.parseInt(ConnectionUtil.session.getAttribute("CityID").toString());
System.out.println();
}
public void imageUpload(FileUploadEvent event) {
imagePath = "";
// Variable to ensure that the query is always enter to same index.
int index = -1;
String query = "";
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();
// File
UploadedFile uploadedFile = event.getFile();
// File Name
String fileName = uploadedFile.getFileName();
//File Extension
String fileExtension = fileName.substring(fileName.lastIndexOf('.'), fileName.length());
String path = externalContext.getRealPath("/resources/images") + "/" ;
try {
//<p:fileUpload id="cityMap" .../>
String componentID = event.getComponent().getClientId();
if (componentID.equalsIgnoreCase("cityMap")) {
index = 0;
/**
* UPDATE table_name SET column1=value, column2=value2,... WHERE some_column=some_value
*/
query = "UPDATE city set citymap=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "cityMap_" + cityID);
boolean outcome = ConnectionUtil.createFile("cityMap_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "cityMap_" + cityID + fileExtension);
setImage(imagePath1, "cityMap_" + cityID + fileExtension);
//imagePath = imagePath + "cityMap" + fileExtension;
}
} else if (componentID.equalsIgnoreCase("cityImage1")) {
index = 1;
query = "UPDATE city set cityimage1=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "cityImage1_" + cityID);
boolean outcome = ConnectionUtil.createFile("cityImage1_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "cityImage1_" + cityID + fileExtension);
setImage(imagePath1, "cityImage1_" + cityID + fileExtension);
}
} else if (componentID.equalsIgnoreCase("cityImage2")) {
index = 2;
query = "UPDATE city set cityimage2=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "cityImage2_" + cityID);
boolean outcome = ConnectionUtil.createFile("cityImage2_", fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "cityImage2_" + cityID + fileExtension);
setImage(imagePath1, "cityImage2_" + cityID + fileExtension);
}
} else if (componentID.equalsIgnoreCase("cityImage3")) {
index = 3;
query = "UPDATE city set cityimage3=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "cityImage3_" + cityID);
boolean outcome = ConnectionUtil.createFile("cityImage3_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "cityImage3_" + cityID + fileExtension);
setImage(imagePath1, "cityImage3_" + cityID + fileExtension);
}
} catch (Exception e) {
FacesMessage msg = new FacesMessage("Exception happen");
FacesContext.getCurrentInstance().addMessage(null, msg);
e.printStackTrace();
// return null;
}
} //end of imageUpload()
private void setImage(String path, String fileName) {
imagePath = path + fileName;
}
Now when I come back to this page after previewing then the images gone. How can I prevent this? Do I make 5 image path variables and then save it somewhere else? But what if I have 50 images. Is there any better option? That when I again come back to upload the page everything remains as it is to this page?

Answer 1

A few things are weird with your code:
You have to select a single scope for your bean, ViewScoped or SesssionScoped.
Should all h:graphicImage components be bound to the same value really?
I can't see the imagePath property of your bean.

Answer 2

Either you store the images in a #SessionScoped bean, or you store them to some persistent storage after you upload them.

Answer 3

Hi here how i done this. First here is my html
<h:form id="cityDetailForm" prependId="false" >
<p:growl id="messages"
showDetail="true" />
<p:panel id="panel1"
style="border-color: #000000;width: 954px;position: absolute;left: 150px;height: 450px;-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(../PIE/PIE.htc)">
<strong Class="MainHeader">
<p:spacer width="10"/> City Detail
</strong>
<h:panelGrid columns="5"
border=""
width="20%"
style="position: absolute; top: 50px;"
columnClasses="asteriskColumns, nameColumns" >
<h:outputText value="*" />
<h:outputText value="Map: " />
<p:fileUpload id="cityMap"
description="Image"
update="city messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="city"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false">
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<p:commandLink update="city"
action="#{cityDetail.removeImage}"
style="color: #0d5b7f;text-decoration: underline">
<h:outputText value="remove" />
</p:commandLink>
<h:outputText value="*" />
<h:outputText value="Image1: " />
<p:fileUpload id="cityImage1"
description="Image"
update="Image1 messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="Image1"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false" >
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<p:commandLink update="Image1"
action="#{cityDetail.removeImage}"
style="color: #0d5b7f;text-decoration: underline">
<h:outputText value="remove" />
</p:commandLink>
<h:outputText value="*" />
<h:outputText value="Image2: " />
<p:fileUpload id="cityImage2"
description="Image"
update="Image2 messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="Image2"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false" >
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<p:commandLink update="Image2"
action="#{cityDetail.removeImage}"
style="color: #0d5b7f;text-decoration: underline">
<h:outputText value="remove" />
</p:commandLink>
<h:outputText value="*" />
<h:outputText value="Image3: " />
<p:fileUpload id="cityImage3"
description="Image"
update="Image3 messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="Image3"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false" >
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<p:commandLink update="Image3"
action="#{cityDetail.removeImage}"
style="color: #0d5b7f;text-decoration: underline">
<h:outputText value="remove" />
</p:commandLink>
<h:outputText value="*" />
<h:outputText value="Image4: " />
<p:fileUpload id="cityImage4"
description="Image"
update="Image4 messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="Image4"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false" >
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<p:commandLink update="Image4"
action="#{cityDetail.removeImage}"
style="color: #0d5b7f;text-decoration: underline">
<h:outputText value="remove" />
</p:commandLink>
</h:panelGrid>
<h:commandButton id="preview"
value="Preview"
action="#{cityDetail.preview}"
style="position: absolute; top: 350px;"
styleClass="ButtonStyle" />
<h:commandButton id="save"
value="Save"
actionListener="#{cityDetail.sendImagesToDatabase}"
action="#{cityDetail.save}"
style="position: absolute; top: 350px; left: 90px;"
styleClass="ButtonStyle" />
<h:commandButton id="cancel"
value="Cancel"
action="#{cityDetail.cancel}"
style="position: absolute; top: 350px; left: 165px;"
styleClass="ButtonStyle" />
</p:panel>
</h:form>
and now here is my bean
#ManagedBean
#ViewScoped
#SessionScoped
public class CityDetail {
private StreamedContent image;
private ArrayList images;
private ArrayList imageNames;
private String imagePath = "/resources/images/Untitled.jpg";
private String imagePath1 = "/resources/images" + "/";
private boolean remove = false;
private String once;
private static int x = 0;
// Set in the City_Review Page, in session variable
public int cityID;
/** Creates a new instance of CityDetail */
public CityDetail() {
/**
* If we come from cityView.xhtml page then this contain value. We are using this because we
* want that when user come from cityView.xhtml page then old values should be retain.
*/
imageNames = (ArrayList)ConnectionUtil.session.getAttribute("cityDetailImageNames");
images = (ArrayList)ConnectionUtil.session.getAttribute("cityDetailImages");
if (imageNames == null) {
imageNames = new ArrayList();
imageNames.add("");
imageNames.add("");
imageNames.add("");
imageNames.add("");
imageNames.add("");
} //end of if()
if (images == null) {
images = new ArrayList();
images.add("");
images.add("");
images.add("");
images.add("");
images.add("");
}
// Getting session ID from seession variable that is set in the City_Review Page
cityID = Integer.parseInt(ConnectionUtil.session.getAttribute("CityID").toString());
once = ConnectionUtil.session.getAttribute("once").toString();
if (once.equalsIgnoreCase("true")) {
//SELECT column_name(s) FROM table_name WHERE column_name operator value
String cityMapQuery = "SELECT citymap From city Where cityid='" + cityID + "'";
String cityImage1Query = "SELECT cityimage1 From city Where cityid='" + cityID + "'";
String cityImage2Query = "SELECT cityimage2 From city Where cityid='" + cityID + "'";
String cityImage3Query = "SELECT cityimage3 From city Where cityid='" + cityID + "'";
String cityImage4Query = "SELECT cityimage4 From city Where cityid='" + cityID + "'";
ArrayList cityMapQueryArray = new ArrayList();
cityMapQueryArray.add(cityMapQuery);
ArrayList cityImage1QueryArray = new ArrayList();
cityImage1QueryArray.add(cityImage1Query);
ArrayList cityImage2QueryArray = new ArrayList();
cityImage2QueryArray.add(cityImage2Query);
ArrayList cityImage3QueryArray = new ArrayList();
cityImage3QueryArray.add(cityImage3Query);
ArrayList cityImage4QueryArray = new ArrayList();
cityImage4QueryArray.add(cityImage4Query);
ArrayList mainArray = new ArrayList();
mainArray.add(cityMapQueryArray);
mainArray.add(cityImage1QueryArray);
mainArray.add(cityImage2QueryArray);
mainArray.add(cityImage3QueryArray);
mainArray.add(cityImage4QueryArray);
} //end of if
System.out.println();
} //end of constructor()
//Getters and setters ---------------------
public StreamedContent getImage() {
return image;
}
public void setImage(StreamedContent image) {
this.image = image;
}
public String getImagePath() {
return imagePath;
}
public void setImagePath(String imagePath) {
this.imagePath = imagePath;
}
//public String imageUpload(FileUploadEvent event) {
public void imageUpload(FileUploadEvent event) {
imagePath = "";
// Variable to ensure that the query is always enter to same index.
int index = -1;
String query = "";
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
HttpServletResponse response = (HttpServletResponse) externalContext.getResponse();
// File
UploadedFile uploadedFile = event.getFile();
// File Name
String fileName = uploadedFile.getFileName();
//File Extension
String fileExtension = fileName.substring(fileName.lastIndexOf('.'), fileName.length());
String path = externalContext.getRealPath("/resources/images") + "/" ;
try {
//<p:fileUpload id="cityMap" .../>
String componentID = event.getComponent().getClientId();
if (componentID.equalsIgnoreCase("cityMap")) {
index = 0;
/**
* UPDATE table_name SET column1=value, column2=value2,... WHERE some_column=some_value
*/
query = "UPDATE city set citymap=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "cityMap_" + cityID);
boolean outcome = ConnectionUtil.createFile("cityMap_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "cityMap_" + cityID + fileExtension);
// setImage(imagePath1, "cityMap_" + cityID + fileExtension, index);
// imagePath = imagePath1 + "cityMap_" + cityID + fileExtension;
}
} else if (componentID.equalsIgnoreCase("cityImage1")) {
index = 1;
query = "UPDATE city set cityimage1=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "sityImage1_" + cityID);
boolean outcome = ConnectionUtil.createFile("sityImage1_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "sityImage1_" + cityID + fileExtension);
}
} else if (componentID.equalsIgnoreCase("cityImage2")) {
index = 2;
query = "UPDATE city set cityimage2=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "sityImage2_" + cityID);
boolean outcome = ConnectionUtil.createFile("sityImage2_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "sityImage2_" + cityID + fileExtension);
}
} else if (componentID.equalsIgnoreCase("cityImage3")) {
index = 3;
query = "UPDATE city set cityimage3=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "sityImage3_" + cityID);
boolean outcome = ConnectionUtil.createFile("sityImage3_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "sityImage3_" + cityID + fileExtension);
}
} else if (componentID.equalsIgnoreCase("cityImage4")) {
index = 4;
query = "UPDATE city set cityimage4=(?) where cityid=" + cityID;
boolean reslut = ConnectionUtil.deleteImageIfExist(path, "sityImage4_" + cityID);
boolean outcome = ConnectionUtil.createFile("sityImage4_" + cityID, fileExtension ,path, uploadedFile);
if (outcome) {
addImageNameToList(index, "sityImage4_" + cityID + fileExtension);
}
} //end of else if()
// Convert file from input stream to bytes
byte[] byteArray = event.getFile().getContents();
/**
* Add images to list so we can retrieve them when user click on save button
*/
// boolean add = images.add(new Images(query, byteArray));
//Check for multiple clicks on the same Browse Button
// If index has value then replace the value rather then add new value to List
images.set(index, new Images(query, byteArray));
//byteArray used to store picture into database
InputStream ist = new ByteArrayInputStream(byteArray);
/*
* StreamedContent Object used to show the picture in jsf pages. We need to convert
* again bytearray to InputStream
*/
image = new DefaultStreamedContent(ist, "image/jpg");
FacesMessage msg = new FacesMessage(fileName + " succesfully uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
//we dont need to use faces-config to navigate in jsf 2
// return null ;
} catch (Exception e) {
FacesMessage msg = new FacesMessage("Exception happen");
FacesContext.getCurrentInstance().addMessage(null, msg);
e.printStackTrace();
// return null;
} //end of catch (Exception e)
} //end of imageUpload()
/**
* This method called when user click on "save" button on page cityDetail.xhtml .
* This method is called before save() function is executed. Because action listener
* runs first.
* #return
*/
public void sendImagesToDatabase(ActionEvent e) {
ArrayList mainArray = new ArrayList();
for(int i=0; i<images.size(); i++) {
ArrayList innerArray = new ArrayList();
if (images.get(i).equals("")) {
continue;
} else {
Images imageObject =(Images)images.get(i);
String query = imageObject.getQuery();
byte[] image = imageObject.getImageBytes();
innerArray.add(query);
innerArray.add(image);
mainArray.add(innerArray);
}
} //end of for()
int executeDocumentUpdateBatch = ConnectionUtil.executeDocumentUpdateBatch(mainArray);
System.out.println(executeDocumentUpdateBatch);
} //end of sendImagesToDatabase()
/**
* This method is called when user click on "preview" button on page cityDetail.xhtml
* #return
*/
public String preview() {
ConnectionUtil.session.setAttribute("cityDetailImageNames", imageNames);
ConnectionUtil.session.setAttribute("cityDetailImages", images);
return "cityView?faces-redirect=true";
} //end of preview()
/**
* This method called when user click on "save" button on page cityDetail.xhtml .
* This method is called after sendImagesToDatabase() function is executed. Because action listener
* runs first.
* #return
*/
public String save() {
ConnectionUtil.session.setAttribute("cityDetailImageNames", imageNames);
ConnectionUtil.session.setAttribute("cityDetailImages", images);
return "cityDetail?faces-redirect=true";
//return null;
} //end of save()
public String cancel() {
ConnectionUtil.session.setAttribute("cityDetailImageNames", null);
ConnectionUtil.session.setAttribute("cityDetailImages", null);
return "City_AddUpdate?faces-redirect=true";
} //end of cancel()
private void addImageNameToList(int index, String fileName) {
imageNames.set(index, fileName);
} //end of addImageNameToList()
/**
* This method is called when user click on remove link on page cityDetail.xhtml beside each image.
* We simply set boolean variable "remove" to true so when "update = <p:graphicImage Id />"
* in <p:commandLink /> is called then <p:graphicImage /> with the mentioned ID is called and
* its putImage() method is called. Then in the method we handle remove image procedure.
*/
public void removeImage() {
remove = true;
} //end of removeImage()
/**
* This method is called for every <p:graphicImage /> because we use "type = preRenderComponent"
* on every <p:graphicImage /> . In this method we we set image path and also check whether
* user coming from preview page so we can again set images to the same position.
* #param event
*/
public void putImage(ComponentSystemEvent event) {
boolean test = remove;
boolean found = false;
x++;
int y = x;
GraphicImage image1 = (GraphicImage)event.getComponent();
String imageURL = image1.getUrl();
String imageDir = image1.getDir();
String imageValue = image1.getValue().toString();
String imageId = image1.getClientId();
ArrayList imagesNames = (ArrayList)ConnectionUtil.session.getAttribute("cityDetailImageNames");
if (imagesNames == null) {
for (int i=0; i<imageNames.size(); i++) {
String fileName = imageNames.get(i).toString();
if (fileName.contains(imageId)) {
if (remove) {
imagePath = "";
imagePath = "/resources/images/Untitled.jpg";
//also remove from list so when on preview page this list called using session
// it contains "" for the remove value. Otherwise image deleted from
//cityDetail page but shown when preview is clicked
imageNames.set(i, "");
remove = false;
break;
} else {
imagePath = "";
imagePath = imagePath1 + fileName;
break;
}
} //end of if
} //end of for()
} else { //handle when retrun from preview page
for(int i=0; i<imagesNames.size(); i++) {
String fileName = imagesNames.get(i).toString();
if (fileName.contains(imageId)) {
if (remove) {
imagePath = "";
imagePath = "/resources/images/Untitled.jpg";
imageNames.set(i, ""); //also remove from list
remove = false;
break;
} else {
imagePath = "";
imagePath = imagePath1 + fileName;
break;
}
} else if (fileName.equalsIgnoreCase("")) {
imagePath = "";
imagePath = "/resources/images/Untitled.jpg";
break;
}
} //end of for
}
System.out.println();
System.out.println();
System.out.println();
} //end of putImage
} //end of class CityDetail
Now if i done anything wrong and unusal then please let me know ? because this code is working fine but working fine doesn't mean that it is perfect or correct.
Thanks