Javascript post jsonObject with Image Binary

Question

I have a HTML form for filling the personal profile, which includes String and Images. And I need to post all these data as JsonObject with one backend api call, and the backend requires the image file sent as binary data. Here is my Json Data as follow:

var profile = {
            "userId"                : email_Id,
            "profile.name"              : "TML David",
            "profile.profilePicture"        : profilePhotoData,
            "profile.galleryImageOne"       : profileGalleryImage1Data,
            "profile.referenceQuote"        : "Reference Quote"
    };

and, profilePhotoData, profileGalleryImage1Data, profileGalleryImage2Data, profileGalleryImage3Data are all image Binary data(Base64).

And here is my post function:

function APICallCreateProfile(profile){
    var requestUrl = BASE_URL + API_URL_CREAT_PROFILE;

    $.ajax({
        url: requestUrl,
        type: 'POST',
        data: profile,
        dataType:DATA_TYPE,
        contentType: CONTENT_TYPE_MEDIA,
        cache:false,
        processData:false,
        timeabout:API_CALL_TIMEOUTS,
        success: function (response) {
            console.log("response " + JSON.stringify(response));
             var success = response.success;
             var objectData = response.data;
             if(success){
                 alert('CreateProfile Success!\n' + JSON.stringify(objectData));
             }else{
                 alert('CreateProfile Faild!\n'+ data.text);
             }
        },
        error: function(data){
             console.log( "error" +JSON.stringify(data)); 
        },
        failure:APIDefaultErrorHandler
    })
    .done(function() { console.log( "second success" ); })
    .always(function() { console.log( "complete" ); });


    return false;
}

But still got failed, I checked the server side, and it complains about the "no multipart boundary was found".

Can anyone help me with this, thanks:)

Updates: var DATA_TYPE = "json"; var CONTENT_TYPE_MEDIA = "multipart/form-data";

What is `CONTENT_TYPE_MEDIA`? It has to be something like `multipart/form-data` otherwise the POST data will not have the correct [boundaries](http://en.wikipedia.org/wiki/MIME#Multipart_messages) — andyb, Jun 03 '13 at 07:51
Hi, andyb, Thanks for the reply. Just updated the value for the missing variable. — David_Wang, Jun 03 '13 at 08:05
Have a look at http://stackoverflow.com/a/5976031/637889 as I think the data is in the wrong format. Also, in that answer, it looks like the `dataType` is set to default and not `json`. — andyb, Jun 03 '13 at 08:24

score 3 · Accepted Answer · answered Jun 12 '13 at 01:54

I think I found the solution with vineet help. I am using XMLHttpRequest, and didn't set the requestHeader, but it works, very strange. But hope this following can help

function APICallCreateProfile(formData){
            var requestUrl = BASE_URL + API_URL_CREAT_PROFILE;
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function()
            {
              if (xhr.readyState==4 && xhr.status==200){
                  console.log( "profile:" + xhr.responseText); 
              }else if (xhr.readyState==500){
                  console.log( "error:" + xhr.responseText); 
              }
            }


            xhr.open('POST', requestUrl, true);
            //    xhr.setRequestHeader("Content-Type","multipart/form-data; boundary=----WebKitFormBoundarynA5hzSDsRj7UJtNa");
            xhr.send(formData);

            return false;
         }

score 0 · Answer 2 · answered Jun 03 '13 at 08:23

0

Why to reinvent the wheel. Just use Jquery Form Plugin, here. It has example for multipart upload as well.

You just need to set input type as file. You will receive files as input stream at server (off course they will be multipart)

answered Jun 03 '13 at 08:23

vineet

336
2
11

Hi, Viny, thanks. But I think this plugin won't support IE8, right?IE8/9 supports the XDomainRequest object, but will support XmlHttpRequest Level 2 as of IE10. – David_Wang Jun 04 '13 at 08:24
I personally don't have IE8, but it works on IE9. Further, I think it works on older browsers as well. Why don't you just dirty your hands and check and educate people here as well :) – vineet Jun 04 '13 at 10:48

Javascript post jsonObject with Image Binary

2 Answers2