how to add more than one object to FormData

Question

I am able to upload an image just fine. However, I need to send a json object with the image so that I can identify what record the image belongs to. What am I doing wrong? Why does the variable info come through as null on the java side of the service?

Client:

let file = event.target.files[0];
 let info = {formId:8, formVersionId:2, formIndex:0};
var formData = new FormData();
            formData.append('file', file);
            formData.append('info', info );
            $.ajax({
                url: URL.BUILDER_URL + '/megaUpload',
                type: 'POST',
                data : formData,
                cache : false,
                contentType : false,
                processData : false,
            });

server:

public Response uploadFile( @FormDataParam("file") InputStream uploadedInputStream, 
                                @FormDataParam("file") FormDataContentDisposition fileDetail,
                                @FormDataParam("info") GuiCreateResponse info) {
}

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

Here it clearly states that , FormData value can either be a string or a blob.

let file = event.target.files[0];
var formData = new FormData();
            formData.append('file', file);
            formData.append('formId', '8' );
            formData.append('formVersionId', '2' );
            formData.append('formIndex', '0');

This should solve your issue.

Answer 2

You are using formId , but you likely want to surround it in quotes as "formId" . Try this code.

let file = event.target.files[0];
let info = {"formId":8, "formVersionId":2, "formIndex":0}; //See changes here
var formData = new FormData();
            formData.append('file', file);
            formData.append('info', info );
            $.ajax({
                url: URL.BUILDER_URL + '/megaUpload',
                type: 'POST',
                data : formData,
                cache : false,
                contentType : false,
                processData : false,
            });

Answer 3

Maybe this is your issue. The docs say, "When using the append() method it is possible to use the third optional parameter to pass a filename inside the Content-Disposition header that is sent to the server. When no filename is specified (or the parameter isn't supported), the name "blob" is used."

Since you do not provide a third parameter, I'm thinking the FormDataContentDisposition needs to look for "blob". Try changing your server annotations to check for that name:

public Response uploadFile( @FormDataParam("file") InputStream uploadedInputStream, 
                            @FormDataParam("blob") FormDataContentDisposition fileDetail,
                            @FormDataParam("info") GuiCreateResponse info)