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

16 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. Nice post
    i have a website http://www.cutumb.com/ for wallpapers
    i also want to use this script on http://www.cutumb.com/ for uploading wallpapers

    ReplyDelete
  4. thanks! very cool!

    ReplyDelete
  5. 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
  6. it won't give the full path of file

    ReplyDelete
  7. Excellent blog!. I was looking for html tutorials and I landed your website through google search. I found your blog very interesting.

    ReplyDelete
  8. I have read your blog its very attractive and impressive. I like it your blog.

    Spring online training Spring online training Spring Hibernate online training Spring Hibernate online training Java online training

    spring training in chennai spring hibernate training in chennai

    ReplyDelete
  9. 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
  10. BlueHost is ultimately the best web-hosting provider for any hosting services you might need.

    ReplyDelete
  11. Good Post! Thank you so much for sharing this pretty post, it was so good to read and useful to improve my knowledge as updated one, keep blogging.

    core java training in Electronic City

    Hibernate Training in electronic city

    spring training in electronic city

    java j2ee training in electronic city

    ReplyDelete
  12. Very nice post here and thanks for it .I always like and such a super contents of these post.Excellent and very cool idea and great content of different kinds of the valuable information's.
    rpa training in bangalore
    best rpa training in bangalore
    RPA training in bangalore
    rpa course in bangalore
    rpa training in chennai
    rpa online training

    ReplyDelete
  13. Whoa! I’m enjoying the template/theme of this website. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and visual appeal. I must say you’ve done a very good job with this.
    aws training in chennai
    AWS TRAINING IN VELACHERY
    AWS TRAINING IN TAMBARAM
    aws training in chennai
    aws training in annanagar
    aws training in chennai

    ReplyDelete
  14. Your very own commitment to getting the message throughout came to be rather powerful and have consistently enabled employees just like me to arrive at their desired goals.
    python training in rajajinagar
    Python training in bangalore
    Python training in usa

    ReplyDelete
  15. 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