Servlet Blob – Upload Image To Database And Display To Browser

Prerequisites

For non-maven Project

In this example, we use maven-based project; in case you are not familiar with it; you can download the following jar files and add to WEB-INF\lib or {tomcat home directory}\lib folder :

Step 1 Create Database

In this example, I just use the default test database. Now we need to create user table:

Step 2 Create New Maven-based Dynamic Web Project

Step 2.1 Create New Project

Go to File->New->Others… Select Dynamic Web Project under Web category then click Next. Type ServletBlobDemo or whatever name you want in the Project name field.

Step 2.2 Configure Target Runtime

  • Click New Runtime… button under Target Runtime.
  • Select Apache Tomcat v7.0. Click Next.
  • Click Browse button to specify Tomcat Server installation directory. The select the folder then click Ok.
  • Click Installed JREs… button to add/remove or edit JRE definition. Remove existing one; then click Add button to configure new one. Select Standard VM; then click Next. Click Directory button to select the root folder of JDK installation. Select the folder then click Ok. Click Finish.
  • Check the JDK then click Ok.
  • Change JRE to the JDK then click Finish.
  • Click Finish the finish the project creation.

Step 2.3 Convert The Project To Maven Project

Right click to the project; select Configure->Convert to Maven Project. Eclipse will generate Project Object Model (pom.xml) file. Open the file by Eclipse text editor then paste the content below.

Note: you can create normal java project and add jar files to your project build path. But it’s easier & faster using maven as maven is integrated with Eclipse IDE; so you don’t need to manually install it. 

Step 3 Create Simple DB Management Class

To make it simple, I don’t apply any DB design pattern in this example. We simple create a class to handle database jobs as belows:

Step 4 Create Upload Servlet Class

Copy the code below; Select src folder; press CTRL + V.

Step 5 Create Servlet Class To Display Image

Copy the code below; Select src folder; press CTRL + V.

Step 6 Create JSP Pages To Display Upload Form

  • Right click to the project or WebContent folder; select new JSP file.
  • Name it upload.jsp
  • Click Finish.

Step 7 Clean & Build

Clean & build the project to download & add maven dependencies to the Project Build Path; also clean old classes file (if any) & force the IDE to recompile java code.

  • Go to Project on menu bar; select Clean…
  • Select Clean all projects (default)
  • Click Ok to proceed clean & build.

Step 8 Configure Tomcat

Select Servers window; in case it’s not there, go to Windows -> Show View-> Others… Select Server -> Servers; then click Ok.

If this is the first time you are creating a server, in the Servers area you will see a link as No servers are available click this link to create a new server. Click the link.

Define a New Server window will be opened, In Select the server type. Select Apache -> Tomcat v7.0 Server. Then click Finish.

Step 9 Deploy The Application

  • Right click to the Tomcat Server select Add and Remove.
  • Move the application (ServletBlobDemo) from Available column to Configured. Then click on Finish to deploy it to tomcat server.

Step 10 Start Tomcat Server

Right click on the tomcat server and choose Start or simply click on the green start icon to start the server.

Step 11 Run The Application

We assume that you install tomcat on default port (8080) and project name is ServletBlobDemo . Open web browser and type:

http://localhost:8080/ServletBlobDemo/upload.jsp

  • Enter name for the image you want to upload
  • Choose the image file to upload.
  • Click Save

The image will be saved to DB as blob and displayed to the web page.