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 e.g.

request.getParameter("a");

...there's nothing there (i.e. 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, e.g.

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.

score 1 · Answer 1 · answered Mar 04 '16 at 01:45

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 e.g.:

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

answered Mar 04 '16 at 01:45

Darshan Mehta

30,102
11
68
102

Fair enough, but the docs do say that you can specify an object and pull out the parameters in the usual way (search for 'formData'): https://github.com/blueimp/jQuery-File-Upload/wiki/Options – RTF Mar 04 '16 at 01:48
You are correct. It says so, however, I came across similar issue a few days ago and managed to resolve it this way. – Darshan Mehta Mar 04 '16 at 01:50
Once I've `stringified` the form data, how do I set it before sending? Is it `data.formData = JSON.stringify(formData)`? And what is the name of the parameter? (for the getParameter() call on the server side) – RTF Mar 04 '16 at 01:54
`var data = new FormData(); data.append('file', ); data.append('param_name', );` – Darshan Mehta Mar 04 '16 at 01:56
http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax – Darshan Mehta Mar 04 '16 at 01:57
Why are you appending the file object to the FormData object. Is that not already taken care of? – RTF Mar 04 '16 at 02:04
Can you please add the full request payload in the question? – Darshan Mehta Mar 04 '16 at 02:10
http://stackoverflow.com/questions/15647503/jquery-file-upload-doesnt-submit-extra-parameters Can you have a look at this? – Darshan Mehta Mar 04 '16 at 02:25

score 0 · Answer 2 · edited May 23 '17 at 11:45

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...
}

score 0 · Answer 3 · answered Oct 28 '19 at 23:29

0

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

answered Oct 28 '19 at 23:29

Derek Wade

697
8
11

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

3 Answers3