Retrieving response from remote server after uploading a file in iframe

Question

I have a form that uploads a file in an firame to a remote server. As a result at the submission url server returns json data with the result of operation, which my iframe catches.

{'result': 'true' or 'false'}

Now I'd like to retrieve this json as the callback of my iframe. I know that I need jsonp to achieve this since it's a cross-site call. Here's my function with sample code from IBM' site :

function fileUploadFunction(){     
    var fileUploadForm = $('#file_upload_form');
    fileUploadForm.attr('action', uploadURL);
    fileUploadForm.submit();
    $('#upload_target').load(function () {
        alert("IFrame loaded");
            $.getJSON(uploadUrl+"&callback=?", function(data) {
                alert("Symbol: " + data.symbol + ", Price: " + data.price);
            });
    });         
};

But here few problems arise. First - my uploadUrl is just "http://something/" . Do I need it to support calls with $callback= suffix ?
Secondly - server gives response only as a result to file upload. So I need to get the result that is stored in my iframe and not at the specified url. How to solve this ?

Here's the link. Notice hidden iframe inside the form. Result from server shows there. :

http://ntt.vipserv.org/artifact/

---

EDIT

I've previously tried :

    $('#upload_target').load(function () {
        var ret = frames['upload_target'].document.getElementsByTagName("body")[0].innerHTML;
        var data = eval("("+ret+")");
    });

But it raises 'permissions denied' error.

Answer 1

This is easily done with easyXDM and there is actually a blog post about this exact use case here.

In essence what it does is use cross-domain messaging to relay the response to the invoking document.

Update: Here is a link for this in action, the source can be found at github, the files are prefixed 'upload_'.

Answer 2

Sean's easyXDM recommendation is a great option (& should probably be marked as correct), but I wanted to suggest another light-weight solution that I haven't seen anyone use.

In cases where you're posting to a hidden iframe on another domain & just need a single response back (not two-way communcation), you could pass a message from the iframe to the parent using a busted url. Here's an example:

1. the parent loads an iframe on different domain

2. the parent polls myframe.contentWindow.location.href (constantly getting Permission denied errors since the frame is on another domain)

3. iframe processes, then redirects to

   http://parentdomain.com/pagethatdoesnotexist?{'result':'ok'}
   

4. iframe gets a 404 but now the location is available to the parent

5. the parent reads the message from the iframe's URL

Answer 3

dont use .html() at all.

I used

jQuery('.someElement')

and it worked for me. you can save the result in a variable and insert it in new element

e.g

var = jQuery('.someElement');
jQuery('.newElement').html(var);

Answer 4

one possible solution could be to set the name of the iframe with pure js. This name could be read from the wrapping parent page.

Answer 5

Looks to me that your code will request uploadURL twice: first, .submit() do a POST request to upload the file and the result is shown in the iframe as a webpage; second, .getJSON() do a GET request and the result is executed as javascript in <script>. You will realize this if you open up Firebug while testing your app.

Since two of the requests are independent, I have no idea how .getJSON() will give you any information about the file you just uploaded with .submit().

For these kind of cross-domain communication, I would suggest using postMessage; otherwise you will need to change you application workflow to do everything in the iframe after file have uploaded; e.g. do <script>alert('Submission accepted');</script> in the iframe.

What are you trying to do after a user have successfully upload a file?