Saturday, November 7, 2009

Read Image into JSP

In the last post i explained about the reading of image from database to jsp file. This jsp will writes the image as it is in the uploaded size into the jsp. In that case you are fowarding byte array to the jsp and you are writing that byte array in the jsp.
You can also get the image from the database by specifying the action in the src attribute of the image tag as in the below tag.

<img height="600" width="500" src="" id="image"/>

In this case the acion will get the byte array of the image from the database and you need to write that byte array into the response as show below....

byte imageArray[] = dao.readImage(imageid);
OutputStream output = response.getOutputStream();

Using output stream you are writing the image array to response this will display the image in the jsp/browser.

In this case you can display the image size as you wish by specifying the height and width.

How to write image into jsp?


byte[] imagedata=(byte[])request.getAttribute("imageData");
OutputStream output = null;
if(imagedata!=null){ response.setContentType("image/gif"); try{
output = response.getOutputStream();
out.clear ();
out = pageContext.pushBody ();
catch(Exception e)
System.out.println("ERROR OCCURED IN Image jsp");
out.println("Image not available");

How to Upload Image into data base using Spring

Using Multipart Resolver:

To work with images or files with spring you should use the multipart resorver. There are two multipart resolvers in the spring
  •       CommonsMultipartResolver: you need commons-fileupload.jar to work with this resolver.
  •       CosmultipartResolver : You need Cos.jar to work with resolver.
Apart from these jar files add the dependent jar files also into the application.
You can specify the maximum size of the image in the bits with the <property /> tag under the <bean > tag.
<bean id="multipartResolver"class="org.springframework.web.multipart.              commons.CommonsMultipartResolver">
<!-- one of the properties available; the maximum file size in bytes -->
  <property name="maxUploadSize" value="100000"/>

<bean id="multipartResolver" class="org.springframework.web.multipart .cos.CosMultipartResolver">
                       <!-- one of the properties available; the maximum file size in bytes -->
                        <property name="maxUploadSize" value="100000"/>


Create the jsp to upload the image. The form enctype should be 'multipart/form-data' and use the file tag to get the browse option in the page.
         <title>Upload a file Example</title>
        <h1>Browse a file</h1>
        <form method="post" action="upload.form" name='uploadForm'   enctype="multipart/form-  data">
             <input type="file" name="file"/>
             <input type="submit"/>

Form Bean:

Write the Bean class for the fileUpload.jsp. You can specify the file data type as MultipartFile or byte or
public class FileUploadBean {
private MultipartFile file;
public void setFile(MultipartFile file) {
this.file = file;
public MultipartFile getFile() {
return file;


Read the image using the controller class.
public class FileUploadController extends SimpleFormController {
protected ModelAndView onSubmit(HttpServletRequest request, HttpServletResponse response, Object command, BindException errors) throws ServletException, IOException {
// cast the bean
FileUploadBean bean = (FileUploadBean) command;
MultipartFile file = bean.getFile();
if (file == null) {
System.out.println("Unable to rad the image from Jsp");
//While writing it into data base if you want to use in the byte array you can convert it
byte imageArray[] = file.getBytes();
//once you got the byte array you can save it in database get the database connection
//save it in the database

return super.onSubmit(request, response, command, errors);

Configuring in Dispatcher Servletxml:

<bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
               <property name="mappings">
<bean id="fileUploadController" lass="examples.FileUploadController">
               <property name="commandClass" value="examples.FileUploadBean"/>
               <property name="formView" value="fileuploadform"/>
               <property name="successView" value="confirmation"/>