Spring File Upload 2

Time needed to complete  ~20 minutes

1.Introduction

This article will show how to submit form that has file(s) to upload and write them to file system 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, save files to path in the file system. DIRECTORY_PATH is where the files will be written, this example used windows network path  \\PC-phoenix\car_images , change is to suite your path (car_images is a shared directory) the controller then return success page.

Listing 4.2: CarAdController

 
   
 @Controller  
 @RequestMapping("/carAd")  
 public class CarAdController {  
   
      private static final Logger log = Logger.getLogger(CarAdController.class);  
        
      private static String DIRECTORY_PATH = "\\\\PC-phoenix\\car_images";  
        
      @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());  
           }  
   
           try {  
                saveFiles(car.getPhotos());  
           } catch (IOException e) {  
                log.error(e);  
           }  
   
           model.addAttribute("manufacturer", car.getManufacturer());  
           model.addAttribute("model", car.getModel());  
           model.addAttribute("note", car.getNote());  
           model.addAttribute("photoList", photoList);  
           return "success";  
   
      }  
   
      private static void saveFiles(List<MultipartFile> fileList) throws IOException {  
   
           File filesDirectory = new File(DIRECTORY_PATH);  
   
           if (!filesDirectory.exists()) {  
                filesDirectory.mkdirs();  
           }  
   
           for (MultipartFile fileMultipart : fileList) {  
                  
                File file2disk = new File(DIRECTORY_PATH+File.separator+fileMultipart.getOriginalFilename());  
                fileMultipart.transferTo(file2disk);  
           }  
   
      }  
 }  
   

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> 
   

- configure tomcat to be able to access  \\PC-phoenix\car_images  by adding file cars.xml to
path to tomcat diretory/conf/Catalina/localhost, cars.xml has one line, Listing 6.2.

Listing 6.2: cars.xml

 <Context docBase="\\PC-phoenix\car_images"/>
   

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