Question

93

Upload Base64 Image Facebook Graph API

rated 0 times [ 94] [ 1] / answers: 1 / hits: 26524 / 11 Years ago, thu, april 25, 2013, 12:00:00

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)]);

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

aleenamarinr

Add To Favorites

Follow

Total Points: 610

Total Questions: 109

Total Answers: 118

Location: Mayotte

Member since Mon, Sep 12, 2022

2 Years ago

answered 11 Years ago miles · Accepted 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