Publishing photo as multipart/form-data to Facebook using Javascript graph API v2.5

Question

Facebook's Graph API (v2.5) User Photo Edge says that there are two separate ways of publishing photos to Facebook:

1: Attach the photo as multipart/form-data. The name of the object doesn't matter, but historically people have used source as the parameter name for the photo.How this works depends on the SDK you happen to be using to do the post.

2: Use a photo that is already on the internet by publishing using the url parameter:

FB.api(
        "/me/photos",
        "POST",
        {
            "url": "{image-url}"
        },
        function (response) {
          if (response && !response.error) {
            /* handle the result */
          }
        }
);

I need to use the first method (multipart) as I have got the base64 image data from canvas.

This seems to be confusing as I don't find the documentation very informative. I understand that the urlData of image is to be encoded in some format in the multipart data along with other parameters. I fail to find any working sample code/proper explanation on how to do this using Javascript SDK & graph api v2.5; even after an exhaustive search on stackoverflow. I have seen a various partially answered/unanswered questions regarding this on stackoverflow...But I still fail to get it work.

Please help. Thanks !

Similar Questions
Facebook Javascript Form Data Photo Upload: requires upload file error
Javascript: Upload image from Canvas to FB via Graph API
Upload Base64 Image Facebook Graph API - Not clear if Javascript Api has been here

[Edit] - Code I have already tried.

var ctx = document.getElementById('canvas2');
urldata=ctx.toDataURL("image/png");
FB.api('/photos', 'POST', {
  message: 'testing Graph API',
  access_token:  accessToken,
  url: urldata,
  no_story:true
  }, function (response) {
    if (!response || response.error) {
      console.log('Error occured:' + response.error.message);
    } else {
    alert('Post ID: ' + response.id);
    } 
    } 
);

Response -" Error occured:(#324) Missing or invalid image file "

I've not tried this, but what would happen if you used the url method and passed the base64 encoded data, prefixed with `data:image/png;base64,`? (Just as you would for an image src) — Reinstate Monica Cellio, Nov 10 '15 at 16:21
Some related questions [link](http://stackoverflow.com/questions/15739555/javascript-upload-image-from-canvas-to-fb-via-graph-api?rq=1) — Sebin Benjamin, Nov 10 '15 at 16:22
@Archer urlData from canvas.toDataURL("image/png") is like "data:image/png;base64,iVBORw0KG......ErkJggg==" and already has data:image/png;base64, prefixed in it But when I pass the data (already prefixed with with data:image/png;base64), I get the errors message 'Error occured:(#324) Missing or invalid image file' as response. — Sebin Benjamin, Nov 10 '15 at 17:01

score 0 · Accepted Answer · answered Apr 06 '18 at 23:22

I was not able to use the JS SDK with this, but it works with a simple AJAX request (with the Fetch API, axios or something else).

First, turn the Canvas Image into a Blob with the following function:

const dataURItoBlob = (dataURI) => {
    let byteString = atob(dataURI.split(',')[1]);
    let ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {
        type: 'image/jpeg'
    });
}

After that, you can use the blog with FormData:

formData.append('source', blob);

Source: http://www.devils-heaven.com/facebook-javascript-sdk-photo-upload-from-canvas/

Publishing photo as multipart/form-data to Facebook using Javascript graph API v2.5

1 Answers1