'no multipart boundary was found' exception while uploading file using jQuery Ajax

Question

Here is my jQuery Snippet

$("#uploadForm").submit(function (e) {
    $.ajax({
        url: 'uploadExcel',
        data: $('#uploadForm').serialize(),
        cache: false,
        contentType: 'multipart/form-data',
        processData: false,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });

while uploading the file i get the following error

org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
    at org.apache.commons.fileupload.FileUploadBase$FileItemIteratorImpl.<init>(FileUploadBase.java:931)
    at org.apache.commons.fileupload.FileUploadBase.getItemIterator(FileUploadBase.java:331)
    at org.apache.commons.fileupload.FileUploadBase.parseRequest(FileUploadBase.java:349)
    at org.apache.commons.fileupload.servlet.ServletFileUpload.parseRequest(ServletFileUpload.java:126)
    at com.obs.controller.ExcelUploadController.doPost(ExcelUploadController.java:36)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)

What is the reason ? How it can be overcome ?

score 5 · Accepted Answer · edited May 23 '17 at 11:46

The reason it that XMLHttpRequest 1 doesn't support file upload, see this SO question: jQuery Ajax File Upload. You're getting the error on the server-side because you're telling the server to expect a multipart-upload but since no payload (= data) is sent with it, an error is thrown.

You'll need FormData from XMLHttpRequest 2 (Beware: Only IE10 and up. All other browsers already support it. See Can I Use? for detailed support info).

It seems FormData can be emulated in older browsers, though I havn't personally tried.

With XMLHttpRequest 2 and FormData, your code would work like this:

$("#uploadForm").submit(function (e) {
    e.preventDefault();
    $.ajax({
        url: 'upload.ajax.php',
        data: new FormData($(this)[0]),
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (data) {
           console.log(data);
        }
    }); 
});

score 0 · Answer 2 · edited May 23 '17 at 12:18

For me, the problem was to wrap the image on form/input-file. I am new in javascript/Jquery, so that was really painful. I know that my server side was ok because I wrote a simple html form and it worked well. I was doing this new page with javascript to preview the image and I got that 'no multipart boundary was found' exception.

I found the answer for this here in StackOverflow, thanks to chandoo.

Try this: if the id of the form is "upload_form".

var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]);

$.ajax({
    url: 'uploadExcel',
    data: formData,
    cache: false,
    contentType: false, //using 'multipart/form-data' didn't work for me
    processData: false, //this is also important when you are dealing with files.
    type: 'POST',
    success: function (data) {
        alert(data);
    }
});

Good look!

'no multipart boundary was found' exception while uploading file using jQuery Ajax

2 Answers2