Graph API posting base64 IMG to Facebook

Question

Trying to post some data to my wall and am coming up with Error

I've been referencing this post mostly: Upload Base64 Image Facebook Graph API

But am stuck and keep receiving a 400 Error response from FB.
And in reference to that, I check my call and my data object is empty (which is what I'm assuming is causing the 400 error).

Here's what I have:

function publishStream(img)
        {
            var accessToken = "";

            FB.getLoginStatus(function(response) 
            {
              if (response.status === 'connected') 
              {
                var uid = response.authResponse.userID;
                accessToken = response.authResponse.accessToken;
              } 
              else if (response.status === 'not_authorized') {
                // the user is logged in to Facebook, 
                // but has not authenticated your app
              } 
              else {
                // the user isn't logged in to Facebook.
              }
            });

            var imageData  = img;
            try{
                blob = dataURItoBlob(imageData);
            }
            catch(e){
                console.log(e);
            }

            var fd = new FormData();
            fd.append("access_token",accessToken);
            fd.append("source", blob);
            fd.append("message","");

            try{
                $.ajax({
                    url:"https://graph.facebook.com/me/photos?access_token=" + accessToken,
                    type:"POST",
                    data:fd,
                    processData:false,
                    contentType:false,
                    cache:false,
                    success:function(data){
                        console.log("success " + data);
                    },
                    error:function(shr,status,data){
                        console.log("error " + data + " Status " + shr.status);
                    },
                    complete:function(){
                    console.log("Posted to facebook");
                    }
                });

            }
            catch(e){
                console.log(e);
            }
        }

        function dataURItoBlob(dataURI) {
            var byteString = window.atob(dataURI);

            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            var blob = new Blob([ia], { type: 'image/png' });

            return blob;
        }

Where the parameter img is a base64 encoded image.

This is my resulting data from the Bad Request:

{ "data": [   ] }

Can anyone guide me to the finish line??? Any help is appreciated!

score 0 · Answer 1 · edited May 23 '17 at 12:03

Have you read the docs on FB under https://developers.facebook.com/docs/graph-api/reference/user/photos/#publish

Apparantly, the sourceblob needs to be encapsuled with escaped curly brackets:

source=%7Bimage-data%7D

What happens if you try

fd.append("source", '%7B' + blob + '%7D');

Also, on one of the comments to the answer at Upload Base64 Image Facebook Graph API it's stated to " remove the "data:image/png;base64," portion when you send it for blob conversion". Did you try this?

Graph API posting base64 IMG to Facebook

1 Answers1