Pseudo-Ascynchronous File Transfer

As you may have seen on some websites such as gmail.com, files are uploaded asynchronously. That is, the website does not reload or refresh or go to any other location, the file simply starts uploading. It is not possible to upload a file via HTTP without submitting a page request because XMLHttpRequest does not handle file uploads. One technique to accomplish the task of uploading a file without reloading a page is to use an iframe. An iframe is an inline frame (As opposed to a block-level frame which takes up an entire segment of a website). Instead of refreshing the document (The parent object), you simply use an iframe to hold the form and do your uploading from that.

This technique is easy to implement. Simply make an iframe with the file upload form in it, and put the iframe on your page. I have used a similar method but employed DTK (DojoToolkit). Dojo has a special transport called IframeTransport.

You can see it in action here: http://sandbox.ctv15.org/async2.html Locate a file on your computer and click upload. While the file is uploading you can switch between tabs. It will also inform you if the upload fails or not. You can view the dynamic source here: http://sandbox.ctv15.org/async1engine.php

My first test before I found that part of dojo was to create two different forms, one in an iframe and one not. Then, when the user submits the original form, it copies the data to the hidden iframe form and submits that one. Unfortunately Firefox won't let you do that:

Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "http://sandbox.ctv15.org/.

It took a long four hours to figure that one out.