In a project where i am working on, we needed to show an image and the image should be change when a user would like to do that. For that we need to hava an attribute in a table called photo and it has to be a blob. See below:
We have now a photo attribute as a blob, the next thing we need to do, is to make an entity with a photo attribute. The entity is called Person and has a byte[] variable called photo. See below for an example:
@Entity
@Table(name=”PERSON”)
public class Person{
private byte[] photo = null;
@Column(name=”PHOTO”)
@Lob
public byte[] getPhoto(){
return photo;
}
public void setPhoto(byte[] photo){
this.photo = photo;
}
}
For the front-end we need to make a page with the next part(just make a simple xhtml page):
<h:panelGrid columns=”2″>
<h:panelGroup>
<s:graphicImage id=”currentImage” value=”#{person.photo}”
rendered=”#{person.photo != null}” styleClass=”vpaPhoto” />
<s:graphicImage id=”defaultImage” value=”/img/default.png”
rendered=”#{person.photo == null}” styleClass=”vpaPhoto” />
</h:panelGroup>
<s:fileUpload id=”imageUploader” data=”#{person.photo}” onchange=”submit()” styleClass=”imageUploader” />
</h:panelGrid>
The appearance should look like this(you can choose any picture you would like for the default.png file):
Ok and now we click on browse an select an image(i’ve downloaded one from google, m_mylle.jpg)
So i’ve selected the m_mylle.jpg file and then i click open. The result is shown below:
Good luck, all suggestions and improvements are welcome.
How to save data image to database
Thanks.