File Upload with Spring and jQuery (Part 5)

Review

We have just completed our application! In the previous sections, we have discussed the functional specs, created the Java classes, declared the configuration files, and wrote the HTML files. In this section, we will build and run the application using Maven, and show how to import the project in Eclipse.

Table of Contents

Part 1: Introduction and Functional Specs
Part 2: Java classes
Part 3: XML configuration
Part 4: HTML form
Part 5: Running the Application

Running the Application

Access the source code

To download the source code, please visit the project's Github repository (click here)

Building with Maven

1. Ensure Maven is installed
2. Open a command window (Windows) or a terminal (Linux/Mac)
3. Run the following command:
   

   mvn tomcat:run

4. You should see the following output:
   

   [INFO] Scanning for projects...
   [INFO] Searching repository for plugin with prefix: 'tomcat'.
   [INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from central
   [INFO] artifact org.codehaus.mojo:tomcat-maven-plugin: checking for updates from snapshots
   [INFO] ------------------------------------------
   [INFO] Building spring-fileupload-tutorial Maven Webapp
   [INFO]    task-segment: [tomcat:run]
   [INFO] ------------------------------------------
   [INFO] Preparing tomcat:run
   [INFO] [apt:process {execution: default}]
   [INFO] [resources:resources {execution: default-resources}]
   [INFO] [tomcat:run {execution: default-cli}]
   [INFO] Running war on http://localhost:8080/spring-fileupload-tutorial
   Jun 20, 2012 8:35:14 PM org.apache.catalina.startup.Embedded start
   INFO: Starting tomcat server
   Jun 20, 2012 8:35:14 PM org.apache.catalina.core.StandardEngine start
   INFO: Starting Servlet Engine: Apache Tomcat/6.0.29
   Jun 20, 2012 8:35:15 PM org.apache.catalina.core.ApplicationContext log
   INFO: Initializing Spring root WebApplicationContext
   Jun 20, 2012 8:35:17 PM org.apache.coyote.http11.Http11Protocol init
   INFO: Initializing Coyote HTTP/1.1 on http-8080
   Jun 20, 2012 8:35:17 PM org.apache.coyote.http11.Http11Protocol start
   INFO: Starting Coyote HTTP/1.1 on http-8080
   

Note: If the project will not build due to missing repositories, please enable the repositories section in the pom.xml!

Access the Entry page

1. Follow the steps with Building with Maven
2. Open a browser
3. Enter the following URL (8080 is the default port for Tomcat):
   

   http://localhost:8080/spring-fileupload-tutorial/upload

Attach a file

1. Click on "Add a file"
2. Browse for a file and add it. Check the logs and you should see something similar to the following:
   

   [DEBUG] [tomcat-http--24 02:15:20] (TraceInterceptor.java:writeToLog:21) Entering UploadController.upload(org.springframework.web.multipart.commons.CommonsMultipartFile@d1258b)
   [DEBUG] [tomcat-http--24 02:15:20] (UploadController.java:upload:43) Writing file to disk...done
   [DEBUG] [tomcat-http--24 02:15:20] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.upload(): [UploadedFile [name=Tulips.jpg, size=620888, url=http://localhost:8080/spring-fileupload-tutorial/resources/Tulips.jpg, thumbnail_url=null, delete_url=null, delete_type=null]]
   

Attach multiple files

1. Click on "Add another file"
2. Browse for files and add them. Check the logs and you should see something similar to the following:
   

   [DEBUG] [tomcat-http--26 02:15:42] (TraceInterceptor.java:writeToLog:21) Entering UploadController.upload(org.springframework.web.multipart.commons.CommonsMultipartFile@7783ea)
   [DEBUG] [tomcat-http--26 02:15:42] (UploadController.java:upload:43) Writing file to disk...done
   [DEBUG] [tomcat-http--26 02:15:42] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.upload(): [UploadedFile [name=Hydrangeas.jpg, size=595284, url=http://localhost:8080/spring-fileupload-tutorial/resources/Hydrangeas.jpg, thumbnail_url=null, delete_url=null, delete_type=null]]
   [DEBUG] [tomcat-http--27 02:15:42] (TraceInterceptor.java:writeToLog:21) Entering UploadController.upload(org.springframework.web.multipart.commons.CommonsMultipartFile@85ec1b)
   [DEBUG] [tomcat-http--27 02:15:42] (UploadController.java:upload:43) Writing file to disk...done
   [DEBUG] [tomcat-http--27 02:15:42] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.upload(): [UploadedFile [name=Jellyfish.jpg, size=775702, url=http://localhost:8080/spring-fileupload-tutorial/resources/Jellyfish.jpg, thumbnail_url=null, delete_url=null, delete_type=null]]
   

Upload the files

1. Click on "Upload". Check the logs and you should see something similar to the following:
   

   [DEBUG] [tomcat-http--30 02:16:20] (TraceInterceptor.java:writeToLog:21) Entering UploadController.message(Message [owner=John Smith, description=These are my files. I owned them., filename=Tulips.jpg,Hydrangeas.jpg,Jellyfish.jpg])
   [DEBUG] [tomcat-http--30 02:16:20] (UploadController.java:message:33) Service processing...done
   [DEBUG] [tomcat-http--30 02:16:20] (TraceInterceptor.java:writeToLog:21) Leaving UploadController.message(): StatusResponse [success=true, message=Message received, ]
   

Note:

When adding a file via the "Add a file" link, the file is automatically uploaded to the backend. The backend responds with an object containing the filename (and other file details). When you click on the "Upload" button, the form data is sent along with the filename. The file itself is never uploaded in this second step because it's already in the server!

Import the project in Eclipse

1. Ensure Maven is installed
2. Open a command window (Windows) or a terminal (Linux/Mac)
3. Run the following command:
   

   mvn eclipse:eclipse -Dwtpversion=2.0

4. You should see the following output:
   

   [INFO] Scanning for projects...
   [INFO] Searching repository for plugin with prefix: 'eclipse'.
   [INFO] org.apache.maven.plugins: checking for updates from central
   [INFO] org.apache.maven.plugins: checking for updates from snapshots
   [INFO] org.codehaus.mojo: checking for updates from central
   [INFO] org.codehaus.mojo: checking for updates from snapshots
   [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from central
   [INFO] artifact org.apache.maven.plugins:maven-eclipse-plugin: checking for updates from snapshots
   [INFO] -----------------------------------------
   [INFO] Building spring-fileupload-tutorial Maven Webapp
   [INFO]    task-segment: [eclipse:eclipse]
   [INFO] -----------------------------------------
   [INFO] Preparing eclipse:eclipse
   [INFO] No goals needed for project - skipping
   [INFO] [eclipse:eclipse {execution: default-cli}]
   [INFO] Adding support for WTP version 2.0.
   [INFO] -----------------------------------------
   [INFO] BUILD SUCCESSFUL
   [INFO] -----------------------------------------
   

   This command will add the following files to your project:
   

   .classpath
   .project
   .settings
   target

   You may have to enable "show hidden files" in your file explorer to view them
   
5. Open Eclipse and import the project

Conclusion

That's it! We've have successfully completed our file upload application with Spring and jQuery-File-Upload plugin. We've learned how to setup an HTML form for file uploads with AJAX-like experience.

I hope you've enjoyed this tutorial. Don't forget to check my other tutorials at the Tutorials section.

Revision History

---

Revision	Date	Description
1	June 20 2012	Uploaded tutorial
2	June 26 2012	Corrected wrong entry url
3	June 27 2012	Corrected wrong entry url again

---

Share the joy: blogger tutorials Social Bookmarking Blogger Widget I'm reading: File Upload with Spring and jQuery (Part 5) ~

Subscribe by reader Subscribe by email Share