Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Post image on facebook via Javascript API

Hi all,

I want to use the javascript API to publish a picture to facebook.

Other than the picture I need also to allow the user to share his location.

I tried with

function publishFacebook(){
  console.log('dentro publish');
  var dataURL = canvas.toDataURL()
  var onlyData = dataURL.substring(dataURL.indexOf(',')+1, dataURL.length);
  var decoded = Base64Binary.decode(onlyData);
  var imageIwillPost = getFormData2(decoded, "aaa", "bbb.png");
  console.log(imageIwillPost);
  FB.api('/me/photos', 'POST',
        {'source': '{' + imageIwillPost + '}' ,
         'message': 'Whatever message we decide'},
         function(resp) {
           console.log('into function');
           if (resp && !resp.error) {
             console.log('uploaded');
             console.log(resp);
           } else {
             console.log('some error');
             console.log(resp.error);}});}

Well the code is pretty much here: https://gist.github.com/siscia/8116013#file-to-fb-js

Anyway, I got back this from facebook, from the javascript console in chrome:

POST https://graph.facebook.com/me/photos 500 (OK) all.js:85
into function main.js:77
uploaded main.js:79
Object {error_code: 1, error_msg: "An unknown error occurred"} 

And I really don't know what to do.

All the code should run only client side, I want to avoid the use of a server.

Also would be amazing if I could use FB.ui instead of FB.api, but I don't think is possible.

User Gravatar

siscia

Posted Dec 24 2013 12:32 UTC

$50


  • javascript
    facebook
    api
  • 15352 Views

10 Replies


Hi siscia,

I hope that the image encoding is right, so the only mistake that I can see is:

'source': '{' + imageIwillPost + '}' 

You should remove the brackets:

'source': imageIwillPost

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 24 2013 12:48 UTC

Hi Nikola,

I should have mention that I of course I have tried without the brackets and still didn't works.

I tried with %7B ( { )e %7D ( } ) and didn't works neither...

What I am afraid is the image encoding, but I have followed the standard.

I tried using this: https://gist.github.com/andyburke/1498758

That actually works, but it works via FQL and I would prefer not to use FQL.

And I also tried to write the JS to produce the right encode, you can see it in my gist.

User Gravatar

siscia

Posted Dec 24 2013 13:38 UTC

Hi siscia,

To isolate the issue, you can try uploading external image:

"url": "{image-url}"

Just add an image as the url parameter (without the brackets).

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 24 2013 13:54 UTC

Hi, sorry for the late reply, but it was Christmas here in Italy XD.

with just the URL it works perfectly...

I guess that the problem is the encoding, but I just followed the specification...

-Simone

User Gravatar

siscia

Posted Dec 26 2013 7:02 UTC

Hi Simone,

This should work for you:

function publishFacebook(){
    console.log('dentro publish');

    var dataURL = canvas.toDataURL('image/png');
    var onlyData = dataURL.substring(dataURL.indexOf(',')+1);
    var decoded = atob(onlyData);

    var dl = decoded.length;

    var buffer = new Uint8Array(dl);

    for (var i = 0; i < dl; i++) {
        buffer[i] = decoded.charCodeAt(i);
    };

    var blob = new Blob([buffer], {type: 'image/png'});

    var formData = new FormData();

    formData.append('source', blob);
    formData.append('message', 'Whatever message we decide');

    FB.api('/me/photos', 'POST', formData, function(resp) {
        console.log('into function');
        if (resp && !resp.error) {
            console.log('uploaded');
            console.log(resp);
        } else {
            console.log('some error');
            console.log(resp.error);
        };
    });
};

Merry Christmas :)

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 26 2013 9:51 UTC

Hi Nikola,

does that works in your environment ?

I tried and I get back the error 324 Object {message: "(#324) Requires upload file", type: "OAuthException", code: 324}

Also I see the use of atob, that is not completely supported by mobile phone's javascript...

For now I fixed the issue hosting the image in imgur, it works but it is not what I want...

Cheers Simone

User Gravatar

siscia

Posted Dec 27 2013 1:15 UTC

Hi siscia,

Sorry for the late response.

I've tested this on my side, but ended up using manual AJAX instead of FB's one.

As the one that you've showed:

https://gist.github.com/andyburke/1498758

So the change that you will need to do to your code from the gist is to replace the FB.api call with this code:

var xhr = new XMLHttpRequest();
xhr.open( 'POST', 'https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), true );
xhr.onload = xhr.onerror = function() {
    console.log( xhr.responseText );
};
xhr.setRequestHeader( "Content-Type", "multipart/form-data; boundary=----ThisIsTheBoundary1234567890" );
xhr.sendAsBinary( imageIwillPost );

Tested with file input.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 28 2013 15:24 UTC

Hi Nikola,

very sorry for the very late reply, but I wasn't home.

Thanks for your nice reply, but it didn't solve the problem... Well it does but I have already show that solution myself, so I don't think it really counts, plus is not what I need...

I guess I will just leave the question open, hoping to get a final solution.

Thank you again, Greets

Simone

User Gravatar

siscia

Posted Jan 2 2014 14:28 UTC

were you able to find a solution

User Gravatar

user1627

Posted Apr 3 2014 8:42 UTC


Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions