Wednesday, June 20, 2012

File Upload with Spring and jQuery (Part 4)

Review

In the previous section, we have written the configuration files. In this section, we will write the HTML form for uploading files.


To achieve a seamless AJAX-like file upload experience, we will be using blueimp's jQuery-File-Upload plugin for jQuery.

What is jQuery-File-Upload?

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

Source: https://github.com/blueimp/jQuery-File-Upload

To test-drive this plugin, please visit the following demos:

For our purposes, we will follow the minimal setup guide, so that we can create our custom UI and eliminate extraneous steps.

Warning!
Make sure to test the plugin on different browsers. Not all browsers behave the same way. In my opinion, Chrome and Firefox are the best for development.

Html Form

Here's our upload form again:

Upload Form

Here's the full source:



Let's dissect this source and make sense of it.

Endpoint Urls
We've declared two global urls: messageUploadUrl and fileUploadUrl. These are the endpoints for uploading messages and files respectively.



Import Scripts
Based on the jQuery-File-Upload basic plugin guide, we need to import the following scripts: jquery.ui.widget.js, jquery.iframe-transport.js, and jquery.fileupload.js. The util.js contains a method for posting JSON objects. The remaining scripts are for the jQuery framework itself.



Initialization Function
This function contains the following initialization steps:
  • Beautify buttons
  • Attach submit function
  • Attach clear function
  • Attach file upload function
  • Initialize filelist data



File Display Function
This is used for formatting filenames. The output is similar to the following: filename (256.50K)



File List Function
This is used to retrieved the list of filenames. The output is comma-delimited, which is similar to the following: filename1.jpg,filename2.doc,filename3.txt



Dialog Function
This is a helper function for displaying dialog boxes.



Clear Function
This clears the form of its contents.



Form
This is the form itself. Notice we've set the file input's opacity to zero to hide it and make it work under Safari and Opera (try removing the opacity and hide the file input via display:none to see an unwanted effect).



By setting the file input's opacity to 0, we have successfully hidden the input. But how do we access it now? Notice the "Add a file" link? We've attached a click trigger function on that link to fire up the file input. If we removed the opacity, here's what we will see:

Chrome 19.0.1084.56


Firefox 9.0.1


Internet Explorer 9.0.8112.16421


Browser Bugs

Unfortunately, even though the jQuery-File-Upload plugin has great cross-browser support, HTML5 and traditional, there are still bugs and unwanted behavior. Maybe it's a configuration issue or a browser issue. In other words, always tests before you deploy to production. Here's what I've discovered so far:

Internet Explorer 9.0.8112.16421
  • Does not upload file
  • Does not upload message

Opera 11.60
  • Attach link does not work if file input has display:none
  • To make it work, set the opacity instead

Safari 5.1.2
  • Attach link does not work if file input has display:none
  • To make it work, set the opacity instead

Next

In the next section, we will build and run the application using Maven, and show how to import the project in Eclipse. 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 4) ~ Twitter FaceBook

Subscribe by reader Subscribe by email Share

19 comments:

  1. Give me the download link to this code...

    ReplyDelete
  2. if u have other examples for multiple files uploading please give it...

    ReplyDelete
  3. Hi Krams,

    Thanks for the nice tutorial. If I have to pass files instead of filename then what I have to do modify in your jquery code

    ReplyDelete
  4. Krams! Thank you very much for the practical demonstration! I would never have been able to implement the file upload library in my project without it!

    ReplyDelete
  5. With this set I get "this._on is not a function" from jquery.fileupload.js even though jquery.widget.ui.js is included before it.

    ReplyDelete
    Replies
    1. Did you get this error when running the sample project or from your own custom project? What browser are you using? Make sure to try another browser

      Delete
    2. Made a custom project and tried with FF12.0 and Chromium.

      I started from scratch and now I get "this.hoverable is not a function" from jquery.ui.widget.js. I have included javascripts in my liferay project with tag

      Delete
    3. This could be a compatibility issue with that widget or a conflict with your existing scripts. Have you checked the compatibility page at https://github.com/blueimp/jQuery-File-Upload?

      Maybe the following link will provide some light? http://stackoverflow.com/questions/10633607/jquery-ui-widget-is-not-a-function-with-autocomplete-combobox

      Delete
  6. Thanks. How you can fix this work on Internet Explorer 9?

    ReplyDelete
    Replies
    1. I don't have IE9. And what specifically needs fixing? I'm running Linux.

      Delete
  7. Hi Thanks for all important tutorial. I want to implement one to many relationship of your hibernate spring view in jqgrid. but creditcards column is showing object.object. please share one jsp to parse one to many relationship in jqgrid. I am waiting for your response.
    Thanks
    dileep maurya India

    ReplyDelete
  8. Thanks krams. it'll be very help full if you validate the uploaded file with spring validator interface.

    ReplyDelete
  9. Hi Kram,
    .config() is not getting called from app.js angular.module('myAppNew',['blueimp.fileupload']); actually while debugging i found that this.$get of jquery.fileupload-angular.js is not getting called which returns defaults: $config. let me know whats could be the possible solution for this.

    ReplyDelete
  10. Mark - when selecting files to add, I get my "Adding files, please wait" message to display, but once all the files are displayed - the message won't go away. Any ideas why this would happen?

    ReplyDelete
  11. Does any one has a solution for Internet Explorer. It is working fine for Chrome, but I need it for IE.

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