Tuesday, December 21, 2010

Upload, serve and search images using GAE BlobStore-Example.

Note: Article below targets developers with GWT+GAE experience.
Overview
The intention is to use GAE BlobStore to serve and search uploaded images. It also uses MVP pattern to layout the application architecture.

Features
- Upload new images to GAE using BlobStore
- Tag images during upload. 
- Search images based on these tags
- View those images of-course!

Dependencies
- GWT 2.1, GAE SDK 1.3.8
- mvp4g 1.1.0, twig-persist-1.0.4

Code


The code does not have GAE and GWT jars. It only contains mvp4g and twig dependencies.


Description

The code in the above URL is an eclipse project using Google Plugin for Eclipse.
Import the project in eclipse.
Fix project dependencies if necessary to ensure the project compiles fine.
Right-Click the project in Package Explorer. 
Select "Run-As Web Application".

This should start the application in dev mode.
Browse the dev url.
http://127.0.0.1:8888/CompuroadImgTag.html?gwt.codesvr=127.0.0.1:9997


Code Descriptions
There are no unit tests currently. This example has sort of served its purpose, so i am not very compelled to add unit tests now.

ServeUpImageServlet: As the name suggests, it serves out the images that are currently in the BlobStore. It depends upon a url parameter "bk" (blob key) ie the id of the image in the BlobStore, to get/serve the image. 


ImgTaggingServiceImpl: This is a GWT-RPC remote service wired to the GWT UI which loads up the current images. The UI constructs img tag with src pointing  to ServeUpImageServlet with the appropriate bk.

BlobUploadServlet: Uploads the binary image and the tags. The image contents and tags are then "redirected" to PersistImgDataServlet to do the actual saving the blobstore.

Map<String, BlobKey> blobs = blobstoreService.getUploadedBlobs(req);
This does the magic of getting the new blob key when images are uploaded.

PersistImgDataServlet: Persists the image data in a blob store. The data comes from BlobUploadServlet.

Hope someone finds this helpful.

Cheers,
Subhro.

1 comment:

  1. Hello! I can't access the link. Isn't it available anymore? I really need an example about serving images from blobstore with gwt. Thank you very much

    ReplyDelete