locked
Uploading Base64 image to OneDrive using JavaScript RRS feed

  • Question

  • Hi,

    I'm trying to upload a Base64 photo to OneDrive using REST API as follows: 

    var token = "EwBwAq1D ... lw4voNMlAB";
    var url = "https://apis.live.net/v5.0/<FOLDER_ID>";
               
    var boundary = 'AaB03x';
    var delimiter = "\r\n--" + boundary + "\r\n";
    var close_delim = "\r\n--" + boundary + "--";
    
    var multipartRequestBody =                
        "--" + boundary + "\r\n" +
        "Content-Dis-data; name=\"file\"; filename=\"img.jpg\"" + "\r\n" +
        "Content-Type: image/jpeg" + "\r\n" +
         imageData +
         close_delim;
    
         $.ajax({
                 type: 'POST',
                 url: url,                
                 contentType: "multipart/form-data; boundary=" + boundary,
                 data: multipartRequestBody
                }).done(function (result, textStatus, jqXHR) {
                    console.log('success : ' + textStatus);
                    console.log(JSON.stringify(result));
    
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    console.log('fail : ' + textStatus + ' desc : ' + JSON.stringify(jqXHR));
                });

    This gives me error as "The request entity body isn't a valid JSON object." It'd be great if you can help me out. 



    • Edited by Vishrut Shah Tuesday, April 15, 2014 9:13 PM // EDIT Content-Disposition was typo
    Tuesday, April 15, 2014 1:41 AM

All replies

  • For one thing, you need to use "Content-Disposition" in your section, not "Content-Dis-data".  Please consult the documentation under REST:

    http://msdn.microsoft.com/en-us/library/live/hh826531.aspx#uploading_files

    It's also a lot simpler to just use PUT and write the file's contents into the response body.


    Carl Hirschman

    Tuesday, April 15, 2014 6:04 PM
    Moderator
  • Actually it is 

    Content-Dis name="file"; filename="hovering_orbs.jpg"

    [FYI: I'm not able to write Content-Disposition in the code block as it trims out it to Content-Dis]

     var token = "EwCAAq1DBAAU ... B61bAQ==";
                    var url = "https://apis.live.net/v5.0/folder.c3a9d66f861a8d58.C3A9D66F861A8D58!1087";
    
                    
                    var multipartRequestBody =
                        "--" + "AaB03x" + "\r\n" +
                        "Content-Dis name=\"file\"; filename=\"img.jpg\"" + "\r\n" +
                        "Content-Type: image/jpeg" + "\r\n" +
                        imageData + "\r\n" + 
                        "--AaB03x--";
    
                    console.log(multipartRequestBody);
    
                    $.ajax({
                        type: 'POST',
                        url: url,
                        headers: {
                            'Authorization': 'Bearer ' + token,
                            'Content-Type': 'multipart/form-data; boundary=AaB03x'
                        },                    
                        data: multipartRequestBody
    
                    }).done(function (result, textStatus, jqXHR) {
                        console.log('success : ' + textStatus);
                        console.log(JSON.stringify(result));
    
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        console.log('fail : ' + textStatus + ' desc : ' + JSON.stringify(jqXHR));
                    });

    I'm getting the same error though:

    {
       "readyState":4,
       "responseText":"{\r   \"error\": {\r      \"code\": \"request_body_invalid\", \r      \"message\": \"The request entity body isn't a valid JSON object.\"\r   }\r}",
       "responseJSON":{
          "error":{
             "code":"request_body_invalid",
             "message":"The request entity body isn't a valid JSON object."
          }
       },
       "status":400,
       "statusText":"Bad Request"
    }


    Tuesday, April 15, 2014 9:55 PM