Saturday, May 30, 2015

Using jquery file upload with a single submit request

The jQuery File Upload plugin is very powerful and will allow multi file uploads with drag and drop for your forms with in-the-background ajax uploads with progress indicators and image preview.

But it's also possible to use in a situation where you simply wants multi file submit with drag and drop, but only with a single HTTP submit request containing all your form data and files.

The trick is to turn off auto upload, then collect the files being added in an array, and the intercept the form submit. Whenever there are files to be uploaded, a submit is done (with the complete form and files using multipart encoding) with a single ajax call.

Here's a sample Spring MVC controller to accept the files, along with an optional ModelAttribute to accept the rest of the form data.