2

I have a Facebook application to upload photo to Facebook. When uploaded, I keep track of the id given by Facebook to that photo for application use. Following is the code I use and it works fine in FireFox and Chrome.

$('#uploadForm').submit(function(e) {
e.preventDefault();            // to prevent the default submit  
$('#message').val(photoMessage);   
var formData = new FormData($('#uploadForm')[0]);  
// this is where the problem is. IE does not understand FormData - SCRIPT5009: 'FormData' is undefined
        $.ajax({
        type : 'POST',
        url : $('#uploadForm').attr('action'), // graph api url - 
        xhr : function() { // custom xhr
            myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        cache : false,
        contentType : false,
        processData : false,
        data : formData,
        success : function(msg) {
                      alert (msg.id);   

in FF and Chrome, I get the msg.id. This is the ID set by Facebook for the uploaded photo and I need this. In IE 9, I get the error,

SCRIPT5009: 'FormData' is undefined

I understand that FormData is supported only from IE10. The workaround I tried for IE ()

$('#uploadForm').submit(function(e) {
            e.preventDefault();
            $('#message').val(photoMessage);

            var options = {     // as FormData is not supported, we create out own js object
                    url     : $('#uploadForm').attr('action'),
                    type    : 'POST',
                    contentType : false,
                    processData : false,
                    success:function( data ) {   // not reaching
                        alert (data.id);
                    },
                }; 
           $('#uploadForm').ajaxSubmit(options); // submit data
                    return false;

Photo is uploaded to Facebook successfully. But the problem is, instead of giving "data" inside my success function, IE asks to save json as a file. When user click save, it will download file to client computer.

If the server side was in the developer control, he could fix this by setting "response_content_type to text/plain". But as the response is coming from Facebook, we don't have a control over that.

Is there a way that we can upload photo Facebook from Facebook (tab/iframe) application and get the response to read the id given by Facebook.

UPDATE

I found this from here

Browsers that support the XMLHttpRequest Level 2 will be able to upload files seamlessly and even get progress updates as the upload proceeds. For older browsers, a fallback technology is used which involves iframes since it is not possible to upload files using the level 1 implmenentation of the XMLHttpRequest object. This is a common fallback technique, but it has inherent limitations. The iframe element is used as the target of the form's submit operation which means that the server response is written to the iframe. This is fine if the response type is HTML or XML, but doesn't work as well if the response type is script or JSON, both of which often contain characters that need to be repesented using entity references when found in HTML markup.

To account for the challenges of script and JSON responses when using the iframe mode, the Form Plugin allows these responses to be embedded in a textarea element and it is recommended that you do so for these response types when used in conjuction with file uploads and older browsers.

It is important to note that even when the dataType option is set to 'script', and the server is actually responding with some javascript to a multipart form submission, the response's Content-Type header should be forced to text/html, otherwise Internet Explorer will prompt the user to download a "file".

Oops. Seems like I am stuck. Because Facebook would return response in json format and I have no control over that.

TV Nath
  • 499
  • 5
  • 12
  • 35

0 Answers0