Wednesday, June 20, 2012

File Upload with Spring and jQuery (Part 1)

Introduction

In this article, we will study how to do file uploads with Spring and jQuery. We will learn how to attach multiple files and use the jQuery-File-Upload plugin to provide a seamless file upload experience.


Dependencies


Github

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

Functional Specs

Let's define our application's requirements:
  • Create a simple form where users can upload multiple files
  • Users should be able to add an owner name and description for each upload
  • Provide an AJAX-like experience

Here's our Use Case diagram:


[User]-(Add files)
[User]-(Upload)

File Upload Strategy
To achieve an AJAX-like experience we have to resort to a different strategy when uploading and sending form data. Instead of sending all form data in one go, we will upload the file separately (behind the scenes without user intervention).

Here are the steps:
  1. User fills-in the form's text inputs, i.e owner and description
  2. User clicks on "Add a file" link. Browsers for a file and attaches it
  3. Behind the scene, the form uploads the file to the server. The server saves the file and returns the file details, i.e filename and file size
  4. User clicks on "Upload" button. The form does a POST action to send the form data. But it never sends the file itself. Instead it sends the filename that was saved by the server. The user is tricked into thinking that the file hasn't been uploaded yet.

Screenshots

Let's preview how our application will look like after it has been completed. This is also a good way to clarify further our application's specs

This is the entry page where users can upload files. Users are allowed to attach multiple files.


Upload Form

When attaching multiple files, this is the expected output.


Multiple files attachment

This alert shows whenever files have been successfully uploaded.


Successful upload alert

This alerts shows whenever files have failed to be uploaded.


Form fields cleared alert

Next

In the next section, we will start writing the Java classes. Click here to proceed.
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: File Upload with Spring and jQuery (Part 1) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

9 comments:

  1. Hi Krams,

    I am getting this error on page load.... (check from firebug console).

    Type Error: this.hoverable is undefined.
    this.hoverable.removeClass(...state-hover");

    -- Jquery...widget.js (line 344)

    Please mail me @ krishna@rupeelog.com

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. thanks! very cool!

    ReplyDelete
  4. Hi. Thanks for share, your post help me so much
    But, I have a question, what if I have a form which contains input type file and text?
    I want to upload single file and text description, and catch it into some Model, such as FileMeta{ MutipartFile file, String description }
    I try to build my own.. but I always get this exception: org.springframework.web.multipart.MultipartException: The current request is not a multipart request
    I've been thinking and searching for solution for two days, but still not found it. Can u help me solve this?

    ReplyDelete
  5. it won't give the full path of file

    ReplyDelete
  6. Hi, can you please give us the logic to show progress bars for individual files and also consolidated progress bar. It will be much helpful. Thanks.

    ReplyDelete
  7. Thank you for allowing me to read it, welcome to the next in a recent article. And thanks for sharing the nice article, keep posting or updating news article.
    AWS Training in Bangalore
    AWS training in sholinganallur
    AWS training in Tambaram
    AWS training in Velachery

    ReplyDelete