Image upload to facebook from clientside using FormData() - what's wrong?

On input file change event, I am executing the following code.

1. create a form data by encoding the image to "multipart/form-data"
2. alert('before calling FB.api-post :' + imgFile.name) - this works
3. create the param to be used in FB.api

4. call FB.api - but this never gets executed. - what's wrong ?

           var fData = new FormData();
   
           var imgFile = $('input[type="file"]')[0].files[0];
   
           fData.append("image", imgFile);
   
           alert('before calling FB.api-post :' + imgFile.name);
   
           var params = {
               "access_token": $D("access_token"),
               "message": $D("img_message"),
               "upload file": true,
               "source":fData
           }
   
           FB.api('/me/photos', 'POST', params,
               function (response) {
                   alert('asasasasasasasasasasasasas');
                   if (!response || response.error) {
                       $D("preview").innerHTML = "Error in facebook Photo UPLOAD : " + response.error;
                   开发者_运维知识库    alert('Error in facebook Photo UPLOAD : ' + response.error);
                   }
                   else {
                       $D("preview").innerHTML = "Photo UPLOADED : " + response;
                       alert('uploaded');
                   }
               }
           );
   
       });
   

Note: $D is nothing but the following shortcut

function $D(element) {
  return document.getElementById(element);
}