18

I'm actually working on a GWT based website. Now I'm stuck on how I should display images stored in a database on my website.

Basically I've a bytearray in my database, which I fetch using hibernate. Now should I probably create an ... tag out of that data, but I don't know how

I'm using GWT in Java and Hibernate

Hons
  • 3,804
  • 3
  • 32
  • 50

4 Answers4

12

Here is the solution. First you should encode the byte array by using com.google.gwt.user.server.Base64Utils.toBase64(byte[]) . But this method does not work for IE 7. and IE8 has 32kb limit.. IE9 does not have this limit.

here is the method on the server

public String getImageData(){
      String base64 = Base64Utils.toBase64(imageByteArray); 
      base64 = "data:image/png;base64,"+base64;
      return base64;
}

Here is the client method ;

@Override 
public void onSuccess(String imageData) {     
    Image image = new Image(imageData);     
    RootPanel.get("image").add(image); 
}
Gursel Koca
  • 20,940
  • 2
  • 24
  • 34
  • what is "image" means (what tag is that) in this call RootPanel.get("image"); and how to do the same in uibinders and action dispatch. – Bennet Jan 24 '14 at 02:38
  • @Bennet `image` here is the id of div tag created in html page of gwt project. – Ankit Singla Feb 08 '14 at 06:47
4

I don't know how GWT works, albeit you can map a servlet/controller which returns resourceStream. For example if you map a servlet "imageViewer" which takes imageId param, request to image would become 

/imageViewer?imageId=1234

Hibernate object would have reference to the blob, so you can return that. Reference on UI would be 

<img src="/imageViewer?imageId=1234"/>

Update: You may not be able to use Model as it is to return image, you would need an explicit controller or servlet which returns stream data.
In servlet you would do something like

// get reference to input stream
InputStream in = hibnerateObject.getImage();  
// set MIME type etc
response.setContentType(mimeType);
OutputStream out = response.getOutputStream();
while ((len = in.read(buf)) >= 0)
 out.write(buf, 0, len);
in.close();
out.close();
ch4nd4n
  • 4,110
  • 2
  • 21
  • 43
  • That one seems to be quite reasonable. In a "normal" JSP or PHP or whatever homepage you would have to do something like this too. Or? – Hons Dec 30 '10 at 07:10
  • You could make request from "browser", irrespective of view/templating technology. Its a simple HTTP request. It should work Ajax as well. – ch4nd4n Jan 03 '11 at 05:53
  • A great balusc's tutorial about serving images through servlets: http://balusc.blogspot.com/2007/04/imageservlet.html This approach works with Image widget as well – Denys Kniazhev-Support Ukraine Feb 19 '12 at 16:04
1

There is Image Widget in GWT. You can't do it client-side but you can call RPC to communicate with the server. Then it is simple CRUD application. In server connect to database with hibernate and return the Image to the client or it's url and on the client-side do something like that :

@Override
public void onSuccess(String imageUrl) {
    Image image = new Image(imageUrl);
    RootPanel.get("image").add(image);
}

@Override
public void onFailure(Throwable caught) {
    Window.alert(caught.getMessage());
}

That's all. Happy coding

  • Okay, I knew about that widget, but it requires a URL, which I don't have, as it is an Image in a DB – Hons Dec 29 '10 at 10:42
  • you should get it and save it the disk (getBLOB) then give it's url to the image. Otherwise , I think you can't show the image I mean without coping it to the disk –  Dec 29 '10 at 10:46
  • > I think you can't show the image I mean without coping it to the disk - Yes you can show the image without copying it on the disk. All you need to do is return blob back to the UI. – ch4nd4n Dec 29 '10 at 12:01
1

I used the same approach as Gursel Koca suggested but could only get it to work using the Apache Base64 library, not (ironically) the GWT Base64Utils

String base64 = Base64.encodeBase64String(array);
base64 = "data:image/"+type+";base64," + base64;
return base64;

Also note that if you are updating an existing image or an image placeholder, the setURL method will overwrite your stylesheet, so make sure to grab that first:

String styleName = profilePicture.getStyleName();
profilePicture.setUrl(base64String);
profilePicture.setStyleName(styleName);
EugeneD
  • 11
  • 1