0

I am new to JQuery and actually front end stuff. So, please help me.

I have Facebook photo upload form like this

<form id ="uploadForm" method="post" enctype="multipart/form-data">
<fieldset>
       <input id="name" type="text" />
      </fieldset>
      <fieldset>
       <textarea id="photoDtls"></textarea>
      </fieldset>
      <fieldset>
       <input name ="source" type="file"  />
      </fieldset>
      <fieldset>
       <input type="image" src="images/btnSubmit.png" onclick="uploadPhoto()"/>
       <input type="image" src="images/btnCancel.png" />
      </fieldset>
</form>

I set the form action using jquery 

FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
              userAccessToken = response.authResponse.accessToken;
           $('#uploadForm').attr('action','https://graph.facebook.com/photos/*page_Id*?access_token='+userAccessToken); 
        } else if (response.status === 'not_authorized') {
              alert('not autherized');
              FB.login(function(response){
                alert('Permission granted');                
              },{scope: 'email,user_birthday,publish_stream,photo_upload'});
          } else {
              alert('not logged in');
            // the user isn't logged in to Facebook.
          }
         });

I have following javascript method to submit the form. The reason I have a separate method to do the submit without doing it in the form itself is I want to get the response. 

function uploadPhoto(){
    photoCaption = $('#name').val();
    photoDetails = $('photoDtls').val();


    $( "#uploadForm" ).submit(function( event ) {
          //alert( event );

    });
}

The last code sniplet is in the working progress. Photo upload happens just fine. What I want is to capture the response which has the following. For now it is displayed in the browser. I want to get this id, and save to database along with some other properties.

{

"id": "101xxxxxxxxxxx00",
"post_id": "6xxxxxx9_101xxxxxxxxxxx00"

}

TV Nath
  • 499
  • 5
  • 12
  • 35
  • Which part are you confused about? Saving it to the database? – Ranhiru Jude Cooray Dec 11 '13 at 08:48
  • after submit, facebook redirects to a page with the response `{ "id": "101xxxxxxxxxxx00", "post_id": "6xxxxxx9_101xxxxxxxxxxx00" }` I want to get this id. the thing is after the form is submitted, you have no control. I tried with adding a hidden iframe and use it as the target. Still, because the iframe points to a url in different domain, I can't access the id. I get the error `Error: Permission denied to access property 'document'` – TV Nath Dec 11 '13 at 08:50
  • What does the alert inside `$( "#uploadForm" ).submit` form says? – Ranhiru Jude Cooray Dec 11 '13 at 08:54
  • Perhaps try using AJAX to do the upload. Then the response will be in the AJAX request. Because right now you are submitting the form directly to Facebook and you have no control. Instead call the `https://graph.facebook.com/photos/` through a AJAX HTTP POST. – Ranhiru Jude Cooray Dec 11 '13 at 08:57
  • Its not any near to response. Some other object::: altKey undefined attrChange undefined attrName undefined bubbles true cancelable true ctrlKey undefined – TV Nath Dec 11 '13 at 08:59
  • Facebook api for photo upload is impossible with Ajax. or at least from the things I have learned. Using ajax, u can upload if the photo I want to add to Facebook has a URL (already in Internet). But uploading from computer is a different matter – TV Nath Dec 11 '13 at 09:02
  • From what I've seen most applications upload the photo to their server and then from the server, upload the photo to facebook. – Ranhiru Jude Cooray Dec 11 '13 at 09:23
  • http://stackoverflow.com/questions/10221588/facebook-graph-api-why-using-async-ajax-file-upload-i-cannot-get-the-photo-id this question is same as mine. but it also does not have an answer – TV Nath Dec 11 '13 at 09:58

0 Answers0