How can I submit a form and upload a file using ajax to a spring controller?

Question

I have a form which contains four fields, the file, the name, the type (just a string) and the taskInstanceId.

<form>
   <table id="documentDetailsTable">
       <tr>
           <td>Document Type: </td>
           <td><select id="documentType" name="type"> </select></td>
       </tr>
       <tr>
           <td>
              Document Name:
           </td>
           <td>
              <input type="text" id="documentName" name="name"/>
           </td>
       </tr>
       <tr id="newFile">
           <td>
              Choose a file:
           </td>
           <td>
               <input type="file" name="file" />
           </td>
    </table>
    <input type="text" style="display: none;" name="taskInstanceId" id="taskInstanceId">

     <input id="uploadButton" value="Upload" type="submit"/>
     <input class="closeButton" id="closeNew" value="Close" type="button"/>
 </form>

If I submit this form it will connect to my FileUploadController and the file will upload.

@RequestMapping(value = "/formTask.do", method = RequestMethod.POST)
public ModelAndView handleFormTaskUpload(@RequestParam("name") String name,
        @RequestParam("type") String type,
        @RequestParam("file") MultipartFile file,
        @RequestParam("taskInstanceId") int taskInstanceId)...//rest of the code

Now I would like to submit this form using jquery/json instead so that I can return a string indicating a successful upload and then display a dialog on the page indicating this. (I don't want to return a new ModelAndView).

So using the same html form I create a new Controller function...

@RequestMapping(value = "/formTask2.json", method = RequestMethod.POST)
public String handleFormTaskUpload2(UploadTaskDocument myNewUpload)).../rest of the code

Now I would like to submit the form above using jQuery. My attempt is here.

This function is called everytime the file is changed.

function prepareUpload(event)
{
    files = event.target.files;
}

And this one is called when the form is submitted.

function uploadFiles(event)
{
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening

var data;
data = {
    documentName: $("#documentName").val(),
    documentType: $("#documentType").val(),
    taskInstanceId: selectedTaskInstanceId,
    uploadedfiles: files
};
var json = JSON.stringify(data);
$.ajax({
    url: '/SafeSiteLive/formTask2.json',
    type: 'POST',
    data: json,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function (data, textStatus, jqXHR)
    {
        if (typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            //submitForm(event, data);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
        // STOP LOADING SPINNER
    }
});
}

The Json data looks like this before it's posted...

But once it reaches the server everything is null...

Answer 1

Ok this might seem a bit different than your solution but I would go forth by doing the following.

As I understand you want to upload the data using ajax to your controller and avoid a post back, and then return a string and nothing but a string. I would do as follows.

You have your form:

<form> //Remove the method type as well as where the post should happen to ensure that you do not have to prevent default behavior
   <table id="documentDetailsTable">
       <tr>
           <td>Document Type: </td>
           <td><select id="documentType" name="type"> </select></td>
       </tr>
       <tr>
           <td>
              Document Name:
           </td>
           <td>
              <input type="text" id="documentName" name="name"/>
           </td>
       </tr>
       <tr id="newFile">
           <td>
              Choose a file:
           </td>
           <td>
               <input type="file" name="file" />
           </td>
    </table>
    <input type="text" style="display: none;" name="taskInstanceId" id="taskInstanceId">

     <input id="uploadButton" value="Upload" onclick('uploadFiles()')/> //Add //the event to your submit button and remove the submit from itself
     <input class="closeButton" id="closeNew" value="Close" type="button"/>
 </form>

Your JQuery:

//Stays the same I would suggest using a object type and then stringify it as follows
function uploadFiles(event)
{
event.stopPropagation(); // Stop stuff happening
event.preventDefault(); // Totally stop stuff happening

// START A LOADING SPINNER HERE

// Create a formdata object and add the files
//var data = new FormData();
//.each(files, function (key, value)
//{
//    data.append(key, value);
//});
//data.append('documentName', $("#documentName").val());
//data.append('documentType', $("#documentType").val());
//data.append('taskInstanceId', $("#taskInstanceId").val());

// Create a objectobject and add the files
var data;
data = {
    documentName:$("#documentName").val(),
    documentType:$("#documentType").val(),
    taskInstanceId:$("#taskInstanceId").val(),
    uploadedfiles: files
}
var json = JSON.stringify(data);
$.ajax({
    url: '/SafeSiteLive/formTask2.do',
    type: 'POST',
    data: json,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function (data, textStatus, jqXHR)
    {
        if (typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            submitForm(event, data);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
        // STOP LOADING SPINNER
    }
});
}

In your controller:

As you are working with MVC, please use a Model as it is the correct fashion to catch a parameter.

public String handleFormTaskUpload2(UploadedFile mynewUpload )
{
//rest of code here
}

Your Model will then look something to this.

public class UploadedFile
{
   public string documentName{get;set}
   public string documentType{get;set}
   public string taskInstanceId{get;set}
   prop List<byte[]> files {get;set}
}

Hope this helps, please let me know if you still don't understand