share base64 image with FB graph API but failed to load resource

Question

I have found some information related to share base64 image with FB graph API : Upload Base64 Image Facebook Graph API

However, I cannot make it successful.

Here is my whole source code:

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>

<canvas id="myCanvas" width="578" height="400"></canvas>

<script>

var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();

  imageObj.onload = function(){
    context.drawImage(imageObj,69,50);
  };

imageObj.src = 'data:image/png;base64,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'

function share_image(){
  var pic = document.getElementById('myCanvas');
  var data = pic.toDataURL("image/png");
  /*var data = $('#map >> canvas').toDataURL('image/png');*/
          var blob;
          try {
            var byteString = atob(data.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);
            }
            blob = new Blob([ab], {type: 'image/png'});
          } catch (e) {
            console.log(e);
          }
          var fd = new FormData();
          fd.append("source", blob);
          fd.append("message", "Photo Text");
          FB.login(function(){
            var auth = FB.getAuthResponse();
            $.ajax({
              url:"https://graph.facebook.com/"+auth.userID+"/photos?access_token=" + auth.accessToken,
              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("Ajax Complete");
              }
            });
          }, {scope: 'publish_actions'});
        }
          </script>

            <script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'XXXXXXXXXXXXXXXXXXX',
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>


    <button type='button' onclick='share_image()'>share on FB</button>


</body>

</html>

I have used the debugger and the error message shows that... " Failed to load resource: the server responded with a status of 403 (OK)

error OK Status 403

Ajax Complete "

And the error output is

{
   "data": [

   ]
}

One more strange thing is that it seems that the userID I got is different from the one I login. I don't know why......

Hupfauer · Answer 1 · 2016-01-20T10:21:50.103

0

You must attach the image as multipart/form-data (see rfc) This is specified by the GraphAPI documentation

HTML

<a href="#" id="upload-trigger" onClick="javascript:fileUpload();">File Upload!</a>
<form id="upload-photo-form" target="upload_iframe" method="post" enctype="multipart/form-data">
<input id="upload-photo-form-file" name="file" size="27" type="file" />
</form>

JS

function fileUpload() {
FB.api('/me/albums', function(response) {
var album = response.data[0]; // Now, upload the image to first found album for easiness.
var action_url = 'https://graph.facebook.com/' + album.id + '/photos?access_token=' +  accessToken;
var form = document.getElementById('upload-photo-form');
form.setAttribute('action', action_url);

form.submit();
});
}

found here

edited Jan 20 '16 at 10:21

answered Jan 20 '16 at 09:46

Hupfauer

591
1
4
15

Do you mean I need to put these thing into my code? Where should I put them? " Content-Disposition: file; filename="file1.png" Content-Type: image/png Content-Transfer-Encoding: binary" .. – Chan Tai Ming Jan 20 '16 at 10:05
@ Markus Hupfauer I do not really understand your code....where should I put the src of base64 image inside your code? – Chan Tai Ming Jan 21 '16 at 13:58

share base64 image with FB graph API but failed to load resource

1 Answers1