Is it possible to perform an asynchronous cross-domain file-upload?

Question

It is possible! Read below.

---

First of all, let me use this diagram to explain how asynchronous file uploads can be achieved:

---

Answer 1

I think it can't be done with the way you're describing. Normally if you have cross domain issues you can solve it by a JSONp approach but that only works for GET requests. With HTML5 you could potentially send binary with the GET request but that's just iffy.

• A solution would be to make the remote webservice available locally by proxying the request on the local webserver. This will cause additional load for your local webserver so I can imagine that it is infeasible. If the files are small and infrequent though, this will do nicely.

• Another solution would be to start polling the server after you've sent the file. You could send along a token and poll the status of the server using regular JSONp. This way you don't need to read from the iframe.

• Put the whole page in an iframe that runs on the remote server. This might just move the problem, but if the XML output is the final step in some process it's quite feasible.

I'm sure you have a good reasons for the processing server to be on a different domain, but if it weren't you wouldn't have all these problems. Perhaps it's worthwhile to reconsider?

Answer 2

The following approach is working in my setup (Firefox 3.6):

<!-- hidden target frame -->
<iframe name="load_target" id="load_target" onload="process(this);" src="#" ...>

<!-- get data from iframe after load and process them --> 
<script type="text/javascript">
    function process(iframe) {
       var data = iframe.contentWindow.document.body.innerHTML; 
       // got test data="<xml><a>b</a></xml>"
    }
</script>

It is working in Chrome as well, but it is needed to exclude a first onload call after the loading of the parent page. This is easily accomplished by setting a "global" variable which is tested in process().

ADDITION

The method works together with a form

<form action="URL" method="post" enctype="multipart/form-data" target="load_target">

which is submitted to URL. This URL needs to reside on the same domain as the parent page page.html. If data from a REMOTE_URL are to be downloaded, then URL would be a PHP proxy.php on the own domain with the content

<?php echo file_get_contents("REMOTE_URL"); ?>

This is a simple approach - however, it is probably excluded by the condition (2) of the question. I have added it here to make my answer complete.

Other approaches, considering iframes only, are discussed by Mahemoff and Georges Auberger.

Answer 3

Just send a cross-domain XHR request with the data from the form instead of submitting the form. CORS is only for the former.

If you must do it the other way, negotiate with the frame using postMessage.

And since the contents of the IFRAME is an XML document, there is no JavaScript code inside the IFRAME which could make use of postMessage or something.

How does that stop you? Include a script element under the HTML or SVG namespace (<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" src="..."/>) anywhere in the XML.

Answer 4

If you can, return an HTML page instead of the XML.
In that page you can use in a SCRIPT tag the command:parent.postMessage

If you have to support older browsers(< IE8 mainly), you can write and read window.name for messages below 2Mb.

Both techniques allows you to pass string data between frames of different domains.

Another technique is to use a setInterval that will call repeatedly the remote domain from the parent page using JSONP to know the status.

In any case, you will need a cooperation from the remote domain to get the data.