Home » Java Basics » 09 - Java Servlet Basics
9

A More Complex Servlet

How to augment an image as an input by incorporating a custom API

Our servlet simply took the name of an image as input. However, we could augment it to take an image as input by incorporating a custom API that processes files uploaded by users.

  1. First, save the cos.jar custom API (this API contains a MultipartRequest class to process file uploads through the browser) onto the folder <Tomcat 5.5 Program Directory>\webapps\ShowFruits\WEB-INF\lib
  2. Change the html file in the following way and save it as 'addfruit.html'. Changes are in red. Notice that we use a different action and set the Encoding to multipart form data - this allows the HTTP message to carry binary data. We also change the input type of the form field named 'image' to "file". 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>New Fruit</title>
</head>
<body>
<form name="addform" ENCTYPE="multipart/form-data" 
         action="addFruit" method="post">
<table>
<tr><td>Name:</td><td>
<input type="text" name="name"></td></tr>
<tr><td>Colors:</td><td>
<input type="text" name="color"></td></tr>
<tr><td>Image:</td><td>
<input type="file" name="image"></td></tr>
<tr><td>Calories:</td><td>
<input type="text" name="calories"></td></tr>
<tr><td colspan=2>
<input type=submit></td></tr>
</table>
</form>
</body>
</html>
  1. Now, add cos.jar to the MySamples project library using the process described in Step 4 of the NetBeans set up section.
  2. Open a new Java class with the name ShowFruitServlet in NetBeans and replace its contents with that of the ShowFruitServlet.Java file. Save this file.
  3. This class includes the cos.jar classes through the following import: 
     import com.oreilly.servlet.MultipartRequest;

Also, the uploaded image is copied to a specified directory in the following line: 

 MultipartRequest multi = new MultipartRequest(request,
"C:\\Program Files\\Apache Software Foundation\\
Tomcat 5.5\\webapps\\ShowFruits\\images");
  1. However, the 'multi' object of type MultipartRequest has now parsed all the request data; the other form field values have to be accessed using multi.getParameter(<Form_Field_Name>) rather than request.getParameter(<Form_Field_Name>) 
out.println("<html><head><title>Fruits</title>");
out.println(</head><body><table>");
out.println("<tr><td>Name:</td><td>" +
multi.getParameter("name") + "</td></tr>");
 
out.println("<tr><td>Color:</td><td>" +
multi.getParameter("color") + "</td></tr>");
 
out.println("<tr><td>Image:</td><td>");
out.println("<img alt=\"Fruit Image\" " + src=\"images/" +
multi.getFilesystemName("image") + "\"></td></tr>");
out.println("<tr><td>Calories:</td><td>" +
multi.getParameter("calories") + "</td></tr>");
  1. Also, note that an HTML <img> tag is printed out. The relative path of the directory to which we saved the uploaded file is mentioned. After this, we use multi.getFilesystemName("image") to substitute the name of the image file obtained through the file upload field named "image".
  2. Compile ShowFruitServlet.Java. Go to the MySamples\build\classes subdirectory. Find ShowFruitServlet.class. Save it in the <Tomcat 5.5 Program Directory>\webapps\ShowFruits\WEB-INF\classes subdirectory.
  3. Add the following entries to ShowFruits\WEB-INF\web.xml for ShowFruitServlet. Paste the 'servlet' tag under the 'servlet' tag we already have. Paste the 'servlet-mapping' tag under the existing 'servlet-mapping' tagImportant: All the 'servlet' tags should be in a group and all the 'servlet-mapping' tags should be in another group below the 'servlet' tags; do not pair a servlet's servlet and servlet mapping tags together. 
Under servlet tags:
<servlet>
<servlet-name>addFruit</servlet-name>
<servlet-class>ShowFruitServlet</servlet-class>
</servlet>
 
Under Servlet mapping tags:
<servlet-mapping>
<servlet-name>addFruit</servlet-name>
<url-pattern>/addFruit</url-pattern>
</servlet-mapping>
  1. Reload the ShowFruits application by clicking on the 'Reload' link next to it on the Tomcat Manager page at http://localhost:8080/manager/html. This should be done every time new files and libraries are added or existing files are modified.
  2. You are now ready to run the new component: Browse to http://localhost:8080/addFruit.html and enter some values. Click on the 'Browse' button and choose an arbitrary image file (*.gif, *.jpg, *.png etc). Submit the form. You will see output with the image you just uploaded.
Screen Shot 9d: Uploaded Image and Form Data
Screen Shot 9d: Uploaded Image and Form Data

The exercises in this chapter should have provided you with a basic understanding of servlets and their capabilities. We will look at processing data input from databases and other means in the next chapter. We will also learn basic JSP syntax and use both servlets and JSPs to perform the same task.


Discuss this in the forums

< Prev
|
Next >