Question

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:

What am I doing wrong?
Thanks.

Answer 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);