0

I have the following js code to send an Ajax request to a URL which maps a method in Spring MVC.

function update(id)
{
    $.ajax({
        datatype:"json",
        type: "put",
        url: "/wagafashion/ajax/TempAjax.htm",
        data: "id=" + id+"&t="+new Date().getTime(),
        success: function(response)
        {
            alert(response);                        
        },
        error: function(e)
        {
            alert('Error: ' + e);
        }
    });
}

and the following is the simple Spring form that has only a file browser and a button.

<form:form id="mainForm" name="mainForm" method="post" action="Temp.htm" enctype="multipart/form-data" commandName="tempBean">
    <input type="file" id="myFile" name="myFile"/>
    <input type="button" id="btnSubmit" name="btnSubmit" onclick="update(1);" value="Submit"/>
    <!--The js function is called when this button is clicked supplying 1 as id.-->
</form:form>

The following method in Spring controller is invoked when that button is pressed.

@RequestMapping(method={RequestMethod.PUT}, value={"ajax/TempAjax"})
public @ResponseBody String update(HttpServletRequest request, HttpServletResponse response)
{
    System.out.println(ServletFileUpload.isMultipartContent(request));
    return "Message";
}

The method call ServletFileUpload.isMultipartContent(request) however returns false.

When I modify the method as follows,

@RequestMapping(method={RequestMethod.PUT}, value={"ajax/TempAjax"}, headers={"content-type=multipart/form-data"})
public @ResponseBody String update(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response)
{
    System.out.println(ServletFileUpload.isMultipartContent(request));
    return "Message";
}

the error section in the js code always alerts Error: [object Object]. The same thing happens even if the POST method is used, in this case.

How to pass multipart contents via Ajax (precisely using the PUT method)?

Tiny
  • 27,221
  • 105
  • 339
  • 599

1 Answers1

0

I can't really see how this is meant to post the multipart file to the server? The data just contains the id and a time.

Try something like:

function update(id)
{
    $.ajax({
        datatype:"json",
        type: "put",
        url: "/wagafashion/ajax/TempAjax.htm",
        data: $('#mainForm').serialize(),
        success: function(response)
        {
            alert(response);                        
        },
        error: function(e)
        {
            alert('Error: ' + e);
        }
    });
}
Alex Barnes
  • 7,174
  • 1
  • 30
  • 50
  • The alert box in the error section only says, "*Error: [object Object]*" even with `data: $('#mainForm').serialize(),`, no luck. – Tiny Dec 01 '12 at 11:36
  • Have you defined a multipart resolver in your spring context? As described here http://stackoverflow.com/a/13405415/302387 – Alex Barnes Dec 01 '12 at 17:48
  • Yes I have defined that `MultipartResolver` in my `applicationContext.xml` file and it works fine (without Ajax) but JavaScript always says, "*Error: [object Object]*", in case of Ajax. – Tiny Dec 01 '12 at 21:11
  • From the jQuery docs: typeString Default: 'GET' The type of request to make ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE, can also be used here, but they are not supported by all browsers. – Alex Barnes Dec 01 '12 at 22:01
  • I also tried to change the request method to POST but it doesn't appear to upload a file using AJAX without using some techniques like a hidden iframe. There are some [jquery plugins](http://www.webdeveloperjuice.com/2010/02/13/7-trusted-ajax-file-upload-plugins-using-jquery/) that address it in different ways. [Also](https://github.com/valums/file-uploader). – Tiny Dec 01 '12 at 22:05