1

I am trying to post an image to a Facebook album using a form in my website. I know I get the correct access token because posting without jQuery and AJAX works fine - but redirects me out of my website. To solve that, I've made a jQuery AJAX post, but this gives me an error I don't understand.

I'm using:

<script type="text/javascript" src="../Components/JQUERY/jquery-1.4.2.min.js"></script>    
<script type="text/javascript" src="../Components/JQUERY/jquery.validate.min.js"></script>

The code is:

  1. Getting the access token and preparing the URL to post to (It is OK, posting without jQuery is uploading the picture to Facebook):

    //....Facebook code for getting the access token...//

// This is the URL that was originally in the form's action tag//
$image_url= "https://graph.facebook.com/" . $ALBUM_ID . "/photos?"
. "access_token=" .$access_token;

  2. HTML of the form:

    <form name="myform" id="myform" enctype="multipart/form-data" action="" method="POST">
   Please choose a photo:
     <input name="source" type="file"><br/>
   Say something about this photo: <br/>
     <textarea id="fbText" name="message" rows="4" cols="47"> </textarea><br/><br/>
     <input type="submit" name="submit" value="Upload"/><br/>
</form>

<div id="results"></div>

  3. The jQuery Code:

    <script type="text/javascript">
  $(document).ready(function(){
      $("#myform").validate({
          debug: false,
          rules: {
              message: "required"   
          },
          messages: {
              message: "Please insert text."
          },
          submitHandler: function(form) {
              // do other stuff for a valid form
              $.post('<?php echo $image_url ?>', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});
</script>

Pressing the upload button gives me the following error:

enter image description here

What am I doing wrong? Thanks.

adrien54
  • 1,620
  • 1
  • 26
  • 31
Alon Adler
  • 3,984
  • 4
  • 32
  • 44

1 Answers1

1

You cannot post a multipart form data with jquery post method. And one more issue is, cross domain communication. You cannot send ajax request to another domain.

For alternatives, see

How do you post to an iframe?
http://jquery.malsup.com/form/#file-upload

Facebook new javascript sdk- uploading photos with it!

For sending multipart data through ajax see these links

Making an HTTP POST call with multipart/form-data using jQuery?

Sending multipart/formdata with jQuery.ajax

or Lastly, you can upload to your server and upload to facebook..

[EDIT]

var options = { 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback      
    }; 

    // bind form using 'ajaxForm' 
    $('#myForm1').ajaxForm(options);
Community
  • 1
  • 1
Venu
  • 7,243
  • 4
  • 39
  • 54
  • Thanks for the help, Is the example [from here](http://jquery.malsup.com/form/) will post the form without redirecting me ? – Alon Adler Jun 28 '12 at 07:47
  • Thanks, this does post the photo in the background: `$('#myform').ajaxForm(function() { alert("Thank you for your comment!"); });` but do you know why im not getting the alert shown ? – Alon Adler Jun 28 '12 at 08:12
  • It should be like this var options = { success: showResponse // post-submit callback }; // bind form using 'ajaxForm' $('#myForm1').ajaxForm(options); – Venu Jun 28 '12 at 08:29
  • Thanks, can you please update in the answer... its hard to understand from a comment text. :) – Alon Adler Jun 28 '12 at 08:41
  • Looks like cross Domain requests can be done. Add this line: `$.support.cors = true;` [jQuery support](http://api.jquery.com/jquery.support/) Add this setting to AJAX: `crossDomain: true` [jQuery AJAX](https://api.jquery.com/jQuery.ajax/) – Alan Wells Mar 24 '14 at 06:15