Mauro Mauro - 1 year ago 321
Node.js Question

Upload Base64 Image Facebook Graph API

I'm trying to upload a base64 image to a FaceBook page using Node.js. I have managed to get the upload working with all the multipart data etc should I read the file from the filesystem (ie. using fs.readFileSync('c:\a.jpg')

However, should I use the base64 encoded image and try upload it, it give me the following error :

{"error":{"message":"(#1) An unknown error occurred","type":"OAuthException","code":1}}

I have tried converting it to binary by
new Buffer(b64string, 'base64');
and uploading that, but no luck.

I have been struggling with this for 3 days now, so anyhelp would be greatly appreciated.

Edit : If anyone also knows how I could convert the base64 to binary and successfully upload it, that would also work for me.

Edit : Code Snippet

var postDetails = separator + newlineConstant + 'Content-Disposition: form-data;name="access_token"' + newlineConstant + newlineConstant + accessToken + newlineConstant + separator;

postDetails = postDetails + newlineConstant + 'Content-Disposition: form-data; name="message"' + newlineConstant + newlineConstant + message + newlineConstant;

//Add the Image information
var fileDetailsString = '';
var index = 0;
var multipartBody = new Buffer(0);
images.forEach(function (currentImage) {
fileDetailsString = fileDetailsString + separator + newlineConstant + 'Content-Disposition: file; name="source"; filename="Image' + index + '"' + newlineConstant + 'Content-Type: image/jpeg' + newlineConstant + newlineConstant;

multipartBody = Buffer.concat([multipartBody, new Buffer(fileDetailsString), currentImage]); //This is what I would use if Bianry data was passed in

currentImage = new Buffer (currentImage.toString('base64'), 'base64'); // The following lines are what I would use for base64 image being passed in (The appropriate lines would be enabled/disabled if I was using Binary/base64)
multipartBody = Buffer.concat([multipartBody, new Buffer(fileDetailsString), currentImage]);

multipartBody = Buffer.concat([new Buffer(postDetails), multipartBody, new Buffer(footer)]);

Answer Source

The code above didn't quite work for me (Missing comma after type:"POST", and data URI to blob function reported errors. I got the following code to work in Firefox and Chrome

function PostImageToFacebook(authToken)
var canvas = document.getElementById("c");
var imageData  = canvas.toDataURL("image/png");
    blob = dataURItoBlob(imageData);
var fd = new FormData();
fd.append("source", blob);
fd.append("message","Photo Text");
    url:"" + authToken,
        console.log("success " + data);
        console.log("error " + data + " Status " + shr.status);
    console.log("Posted to facebook");


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

Here's the code at GitHub

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download