Mauro Mauro - 4 months ago 102
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;
index++;

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

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");
try{
    blob = dataURItoBlob(imageData);
}catch(e){console.log(e);}
var fd = new FormData();
fd.append("access_token",authToken);
fd.append("source", blob);
fd.append("message","Photo Text");
try{
$.ajax({
    url:"https://graph.facebook.com/me/photos?access_token=" + authToken,
    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 = 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 https://github.com/DanBrown180/html5-canvas-post-to-facebook-base64

Comments