How to retrieve form data posted with jQuery fileupload to Java servlet?

Question

The jQuery fileupload docs say that I can send additional form data parameters by setting the formData parameter to an object before submitting it. I'm doing that like this:

data.formData = {'a':'one', 'b':'two'};

...and then calling data.submit() . My Java servlet (3.x) gets called, but when I try to retrieve the parameters in the normal way eg

request.getParameter("a");

...there's nothing there (ie it's null ). I've looked in request.getParameterNames() and request.getParameterMap() too, they're both empty.

How can I access the parameters?

These are my fileupload initialization options:

url: '/my-upload-servlet',
autoUpload: false,
singleFileUploads: false,
maxFileSize: 9000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png|tif|tiff|pdf)$/i,
dataType: 'json',
previewMaxWidth: 128,
previewMaxHeight: 85,
disableImageResize: false,
previewCrop: true,

I've also tried setting the formData option to an array of objects, which the docs say is also an option, eg

data.formData = [ {name:'a', value:'one'}, {name:'b', value:'two'} ]

...but it still doesn't work.

Here's the full code snippet for uploading the file (the commented out stuff are the other things that I've tried):

var params = new FormData();
params.append('params', JSON.stringify({a:'one', b:'two'}) );
data.formData = params;

//data.formData = {a:'one', b:'two'};

//data.formData = [
//    { name: 'a', value: 'one' },
//    { name: 'b', value: 'two' },
//];

//data.url = '/my-upload-servlet?a=one&b=two';

data.submit()
    .success(function (result, textStatus, jqXHR) {
        console.log('Hurray!');

    }).error(function (jqXHR, textStatus, errorThrown) {
        console.log('Boo!');

    }).complete(function (result, textStatus, jqXHR) { 
        console.log('Done');
    });

None of these are working for me.
No matter which of the above methods I try, calling HttpServletRequest.getParameter("a") or HttpServletRequest.getParameter("params") (in the case of the FormData) always returns null .

Answer 1

We can't send an object in the payload of file upload ( multipar ) request. We can only send key value pairs. However, if we want to send a json then we first need to convert it into the string, using:

var data = JSON.stringify(formData);

Once this is done, we can send it in the request payload and deserialize it in servlet eg:

mapper.readValue(request.getParameter(""), YourClass.class);

Answer 2

I only realized after examining the Chrome developer console that the request has been including the parameters in the request payload all along (even when setting the formData to an object).

The problem has been accessing them at the servlet. This question put me on the right path: Getting request payload from POST request in Java servlet

I'm actually using Apache Commons FileUpload at the servlet end, so I was able to access the parameters with something like this:

FileItemIterator iterator = upload.getItemIterator(request);
while ( iterator.hasNext() ){
    FileItemStream item = iterator.next();
    String paramName = item.getFieldName();
    InputStream paramValueStream = item.openStream();
    // do it...
} 

Answer 3

This answer helped me greatly, with sending a file using a jQuery FileUpload plugin to a Java Servlet: https://github.com/blueimp/jQuery-File-Upload

https://stackoverflow.com/a/32555960/2668852