File upload progress and CF

posted: 18 Mar 2008

I'm working on a video project at work, where we need to provide visual feedback on a file upload. You know the sort, fill in the form, pick your file, hit submit and watch the progress bar tell you how much has been uploaded.

Well my initial thought was that ColdFusion would be able to do this, submit to a hidden iframe and then monitor the files size, however, it appears CF won't even start to process the script until the entire request, file and all, has been received. So by the time you can do anything scripty, the process is already complete. Even if the script doesn't use the file, it gets it ready to process just in case.

So I turned my gaze to Java, CF being Java meant I could maybe sit a jsp alongside my CF pages, and I found FileUpload from those great guys at the Apache Foundation. The latest incarnation (1.2 I think) of FileUpload has the ability to watch the upload progress. You basically register an event handler class to the update() method of FileUpload.

So I got my Java books out and went to work on revising inner classes. I now have two jsp pages, one that accepts the form with an inner class that writes the percentage complete, and other status' to an application variable, and a second that provides a monitor on this status.

On submit of the form, JavaScript rewrites the form submission, hides the submit button, reveals the progress bar, creates a hidden iframe and submits the form to it. It then sets up an asynchronous XHR to watch it's progress. The monitor jsp file feeds back the progress and the page updates a set of divs that make up the progress bar. Once the file is uploaded a 'new' status is returned to the browser and the page redirects to a static 'success' page.

I am thinking about posting an example of the code, once I've ironed out any wrinkles.