Facebook graph api - why using async ajax file upload i cannot get the photo id response?

Question

Im using the iframe techinique to upload a photo to the facebook graph api. im using this technique: http://www.openjs.com/articles/ajax/ajax_file_upload/response_data.php.

The photo gets uploaded sucessfully. But i NEED to read the response it gives to me on my iframe, but im not being able to do it. I tried every technique i know, pure javascript and jquery hacks.. but nothing works...

the format of the response is the following (i can see this on chrome js console ):

{
   "id": "111346062333977",
   "post_id": "100003757518505_111258412342742"
}

what is that format? how can i read it? its not on the DOM, its not on the body, its nowere!!!!

Is the "" and "" part of the response? If so, then you're probably doing something wrong. The response from facebook should be a JSON encoded string. — Nitzan Tomer, Apr 19 '12 at 06:26
@NitzanTomer, no it's not, this is probably some styling from the tool there the response was seen (the response from Graph API is always valid JSON) — Juicy Scripter, Apr 19 '12 at 07:08

score 0 · Answer 1 · answered Apr 19 '12 at 07:14

0

The response from Graph API are always JSON encoded (unless callback parameter specified, in that case it's JSONP).

You will not be able to get that response in a flow you trying to implement. If you doing direct upload of photo to Graph API from client-side response will be subject of cross-domain policy and your JavaScript simply have no access to the response.

You should upload the image from server side to be able to retrieve response which contain uploaded photo id

answered Apr 19 '12 at 07:14

Juicy Scripter

25,778
6
72
93

I undestand that... but think for a moment... If facebook is able to return a JSONP as a response, whats the meaning of that response if i cant call it? i mean, how can i execute the function it is returning to me?? i've tried this: "https://graph.facebook.com/.....&callback=myReturn". Then, facebook returned this to me inside my iframe : "
```
myReturn({
   "id": "111346062333977",
   "post_id": "100003757518505_111258412342742"
})
```
". Ok!!! NICE... but... how can i call this function???? why it is returned if i cant call it via javascript??
– user1342972 Apr 20 '12 at 17:36
@user1342972, the short answer is: you don't, you cannot call javascript code within document loaded on other domain! The fact that you trying to implement flow you not fully understand doesn't make returned data useless, it's just desired for use in a different manner... – Juicy Scripter Apr 20 '12 at 18:42

score 0 · Answer 2 · edited May 23 '17 at 10:34

If I understand your problem then you came across the Same origin policy since you post the form into an iframe, and the action of the form is to another domain, different than yours (the one in which the main page is loaded from).

Because of that, the response you get in the iframe can not be then passed to the parent page since they don't share the same domain and the browser blocks the communication.

As @JuicyScripter wrote you might want to think about posting the image from the server side which will make things simpler. If how ever you don't want to give up on the client side solution so quickly, I suggest you check this thread: Facebook Graph API - upload photo using JavaScript

Facebook graph api - why using async ajax file upload i cannot get the photo id response?

2 Answers2

Linked