How to upload a file using the PUT method via Ajax in Spring MVC?

Question

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)?

Alex Barnes · Accepted Answer · 2012-12-01 00:39:25Z

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);
        }
    });
}

answered Dec 1, 2012 at 0:39

Alex Barnes

7,2281 gold badge32 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tiny Over a year ago

The alert box in the error section only says, "Error: [object Object]" even with data: $('#mainForm').serialize(),, no luck.

Alex Barnes Over a year ago

Have you defined a multipart resolver in your spring context? As described here stackoverflow.com/a/13405415/302387

Tiny Over a year ago

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.

Alex Barnes Over a year ago

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.

Tiny Over a year ago

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 that address it in different ways. Also.

Collectives™ on Stack Overflow

How to upload a file using the PUT method via Ajax in Spring MVC?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related