jqueryajaxmultipartform-dataapache-commons-fileupload

How to set a boundary on a multipart/form-data request while using jquery ajax FormData() with multiple files


I have an HTML form that needs to upload 3 parts to an existing REST API in a single request. I can't seem to find documentation on how to set a boundary on a FormData submission.

I've attempted to follow the examples given here: How to send FormData objects with Ajax-requests in jQuery?

However when I submit the data it gets rejected with the following stacktrace:

Caused by: org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found.

How can I set a boundary?

Here is the HTML/Javascript:

   <script type="text/javascript">
    function handleSubmit() {


        var jsonString = "{" +
                "\"userId\":\"" + document.formSubmit.userId.value + "\"" +
                ",\"locale\":\"" + document.formSubmit.locale.value + "\"" +
                "}";

        var data = new FormData();
        data.append('Json',jsonString);
        data.append('frontImage', document.formSubmit.frontImage.files[0]);
        data.append('backImage', document.formSubmit.backImage.files[0]);

        document.getElementById("sent").innerHTML = jsonString;
        document.getElementById("results").innerHTML = "";
        $.ajax({
                   url:getFileSubmitUrl(),
                   data:data,
                   cache: false,
                   processData: false,
                   contentType: 'multipart/form-data',
                   type:'POST',
                   success:function (data, status, req) {
                       handleResults(req);
                   },
                   error:function (req, status, error) {
                       handleResults(req);
                   }
               });
    }

</script>

Here is the Form:

<form name="formSubmit" action="#">
    userId: <input id="userId" name="userId" value=""/><br/>
    locale: <input name="locale" value="en_US"/><br/>
    front Image: <input type="file" name="frontImage"/><br/>
    back Image: <input type="file" name="backImage"/><br/>
    <input type="button" onclick="handleSubmit();" value="Submit"/>
</form>

Thanks in advance for any help!


Solution

  • Musa's response worked great. Setting the contentType to false did submit the form data correctly. THANKS!

    Here is the ajax call that worked:

    $.ajax({
        url:getFileSubmitUrl(),
        data:data,
        cache:false,
        processData:false,
        contentType:false,
        type:'POST',
        success:function (data, status, req) {
            handleResults(req);
        },
        error:function (req, status, error) {
            handleResults(req);
        }
    });
    

    I also found that this code also worked:

      var oReq = new XMLHttpRequest();
            oReq.open("POST", getFileSubmitUrl());
            oReq.addEventListener("error", transferComplete);
            oReq.addEventListener("load", transferComplete);
            oReq.addEventListener("abort", transferComplete);
            oReq.send(data);
        }
        function transferComplete(evt) {
            handleResults(evt.target);
        }