Upload ByteArray image on Facebook with Javascript SDK

Question

I'm trying to upload a photo on Facebook using Javascript SDK. In particular I generate a base64 encoded bytearray from my Actionscript3 app, I pass it to Javascript file using ExternalInterface, and from that I decode the bytearray and I try to upload to FB. But it give me this error:

{"error":{"message":"(#324) Requires upload file","type":"OAuthException","code":324}}

I tried to upload an image simply from url, and in that way it goes well!

This is my Javascript code:

    upPhoto:function(photo) {
       var img = F.decode_base64(photo);

       FB.api('/me/photos', 'post', {
        message:'test',
        fileName:'test',
        image: img
       }, function(response){

          if (!response || response.error) {
            log('Error!');
          } else {
            log('Upload OK!');
          }
       });  
    }

    decode_base64:function(s) {
       var e={},i,k,v=[],r='',w=String.fromCharCode;
       var n=[[65,91],[97,123],[48,58],[47,48],[43,44]];

       for(z in n){for(i=n[z][0];i<n[z][1];i++){v.push(w(i));}}
       for(i=0;i<64;i++){e[v[i]]=i;}

       for(i=0;i<s.length;i+=72){
          var b=0,c,x,l=0,o=s.substring(i,i+72);
          for(x=0;x<o.length;x++){
            c=e[o.charAt(x)];b=(b<<6)+c;l+=6;
            while(l>=8){r+=w((b>>>(l-=8))%256);}
          }
       }
      return r;
    }

Answer 1

I'm not sure where you got that parameters list from, but according to the documentation there's no fileName nor image, you should use source which is required.

Another thing is that you need to post this as multipart/form-data, which you don't.

Have you checked this thread: Facebook Graph API - upload photo using JavaScript

Answer 2

I've spent hours and hours the last 3 days on this topic. Now, I got it, and i've got a SOLUTION to fix your code (you were close to the solution.. ^^) :

That is SIMPLE : Once your user has authorized your fb app with "publish_stream", I just use the following code, and it does upload the picture on the user wall :-) I hope it really really helps !

            <a href="#" onclick="uploadonwall(); return false;">Call the Publish Magic</a>
            <script>
            function uploadonwall(){
                FB.api('/me/photos', 'post',
                {
                    message: 'A new pic is on my wall ...',
                    url:'http://www.yourwebsite.com/big_image_about_to_be_published_on_facebook_user_wall.jpg'

                }, function(response) {
                    if (!response || response.error) {
                        alert('Oops! User Denied Access');
                    } else {
                        alert('Success: Content Published on Facebook Wall');
                    }
                });
            }
            </script>

Answer 3

I solved using Facebook JS SDK for login stuff, and simple Actionscript's HTTP functions to POST image on Facebook.

This is the AS3 upload function:

private function uploadOnFB(event:Event):void {

    var byteArray:ByteArray = PNGEncoder.encode(videobitmapData);

    var url:String = "https://graph.facebook.com/me/photos";

    var param:Object = new Object();
    param.message = "My uploaded photo!";
    param.access_token = access_token;

    var urlRequest:URLRequest = new URLRequest();
    urlRequest.url = url;
    urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
    urlRequest.method = URLRequestMethod.POST;
    urlRequest.data = UploadPostHelper.getPostData("photo.png", byteArray, param);

    var urlLoader:URLLoader = new URLLoader();
    urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
    urlLoader.load(urlRequest);
}

access_token is returned by onLoginSuccess callback of the FB Javascript SDK.