spring examples: Spring File Upload 1

Time needed to complete ~20 minutes

1.Introduction

This article will show how to submit form that has file(s) to upload using spring framework.

2.What is used in this tutorial:

1- Maven 3

2- Jdk 1.7

3- Tomcat 7.0.55

4- Eclipse Luna 4.4

5- Spring Core 3.2.9

3.Project Structure

Picture 3.1: Project structure

4. Form and controller

- CarUploadForm bean contains four fields, listing 4.1.

Listing 4.1: CarUploadForm bean

   
 import java.util.List;  
 import org.hibernate.validator.constraints.NotEmpty;  
 import org.springframework.web.multipart.MultipartFile;  
   
 import org.hibernate.validator.constraints.NotEmpty;  
 import org.springframework.web.multipart.MultipartFile;  
   
 public class CarUploadForm {  
   
      @NotEmpty  
      private String manufacturer;  
   
      @NotEmpty  
      private String model;  
   
      @NotEmpty  
      private String note;  
   
      private List<MultipartFile> photos;  
   
      //setters and getters omitted  
   
 }

- CarAdController, Listing 4.2, the displayForm method will show the form in the get request and when the form is submitted saveForm method will handle the form data then return success.jsp page.

Listing 4.2: CarAdController

 package org.phoenix.controller;  
   
 import java.util.ArrayList;  
 import java.util.List;  
 import java.util.Map;  
   
 import javax.servlet.http.HttpServletRequest;  
 import javax.validation.Valid;  
   
 import org.phoenix.bean.CarUploadForm;  
 import org.springframework.stereotype.Controller;  
 import org.springframework.ui.Model;  
 import org.springframework.validation.BindingResult;  
 import org.springframework.web.bind.annotation.ModelAttribute;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestMethod;  
 import org.springframework.web.multipart.MultipartFile;  
   
 @Controller  
 @RequestMapping("/carAd")  
 public class CarAdController {  
        
        
       @ModelAttribute("car")  
        public CarUploadForm createformBeanModel() {      
          return new CarUploadForm();  
        }  
        
      @RequestMapping(value = "/show", method = RequestMethod.GET)  
      public String displayForm(Map<String, Object> map,org.springframework.ui.Model model,HttpServletRequest request) {  
            return "carAdForm";       
      }       
        
      @RequestMapping(value = "/save", method = RequestMethod.POST)  
      public String saveForm(@ModelAttribute("car") @Valid CarUploadForm car,BindingResult bindingResult, Model model) {            
                       
           if (bindingResult.hasErrors())  
        {          
         return "carAdForm";  
        }  
                  
           List<String> photoList = new ArrayList<String>();  
           for(MultipartFile imageFile : car.getPhotos()){              
             photoList.add("image Name: "+imageFile.getOriginalFilename() +" and size in bytes:"+imageFile.getSize());  
           }  
             
           model.addAttribute("manufacturer",car.getManufacturer());  
           model.addAttribute("model",car.getModel());  
           model.addAttribute("note",car.getNote());  
           model.addAttribute("photoList", photoList);  
           return "success";  
        
      }  
   
 }

5. View

- Form is in page carAdForm.jsp, Listing 5.1.

Listing 5.1: carAdForm.jsp

 <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>  
 <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>  
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <style>  
 .err {  
      color: red;  
      font-weight: bold;  
 }  
 </style>  
 </head>  
 <body>  
      <div id="main">  
   
           <div id="content">  
   
                <form:form method="post" commandName="car" action="/fu1/carAd/save"  
                     enctype="multipart/form-data">  
                     <form:errors path="*" cssClass="err" />  
                     <fieldset>  
                          <table>  
                               <tr>  
                                    <td>Manufacturer</td>  
                                    <td><form:input path="manufacturer" /></td>  
                                    <td><form:errors path="manufacturer" cssClass="err" /></td>  
                               </tr>  
   
                               <tr>  
                                    <td>Model</td>  
                                    <td><form:input path="model" /></td>  
                                    <td><form:errors path="model" cssClass="err" />     </td>  
                               </tr>  
   
                               <tr>  
                                    <td>Note</td>  
                                    <td><form:textarea path="note" rows="5" cols="19" /></td>  
                                    <td><form:errors path="note" cssClass="err" /></td>  
                               </tr>  
                          </table>  
                          <br />  
                     </fieldset>  
                     <fieldset>  
                          <table id="fileTable">  
                               <tr>  
                                    <td><input name="photos[0]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[1]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                               <tr>  
                                    <td><input name="photos[2]" type="file" maxlength=1024000 /></td>  
                               </tr>  
                          </table>  
                     </fieldset>  
                     <p>  
                          <input type="submit" value="Submit" />  
                     </p>  
                </form:form>  
   
           </div>  
      </div>  
 </body>  
 </html>

Listing 5.2: Success page

 <%@ page language="java" contentType="text/html; charset=UTF-8"  
      pageEncoding="UTF-8"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
 <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>       
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 </head>  
 <body>  
 <table>  
  <tr><td>Manufacturer:</td><td>${manufacturer}</td></tr>  
  <tr><td>Model:</td><td>${model}</td></tr>  
  <tr><td>Note:</td><td>${note}</td></tr>  
  <tr></tr>  
    
    <c:forEach items="${photoList}" var="photo">  
       <tr><td>${photo}</td></tr>  
     </c:forEach>  
    
 </table>  
 </body>  
 </html>

6. Configuration

- In resources/spring/application-config.xml is the multipartResolver bean where the maximum size of each uploaded file can specified, Listing 6.1. Each uploaded file is limited to 1MB (1024000) using property maxUploadedSize.

Listing 6.1: multipartResolver bean definition

 <bean id="multipartResolver"  
           class="org.springframework.web.multipart.commons.CommonsMultipartResolver">  
           <!-- the maximum file size in bytes -->  
           <property name="maxUploadSize" value="1024000" />  
      </bean>

7. Deploying to tomcat

Note: don't forget to change username and password for tomcat server in pom.xml file

- Start tomcat.

- Deploy application from run configuration in goal type clean install tomcat7:redeploy
click Apply and Run buttons.

- In browser type http://localhost:8080/fu1/carAd/show to see the form picture 7.1.

Picture 7.1: carAdForm

- Enter some data in text field, select some files and Submit. Picture 7.2. There is a server side validation for Manufacturer,model and note fields, if any of them is not entered error message will be shown.

Picture 7.2: carAdForm data

- After submitting the data entered in the carAdForm will be displayed in success page, picture 7.3.

Picture 7.3: success page

8. Eclipse Project

Download project source code

spring examples

Saturday, September 27, 2014

Spring File Upload 1