File Uploads

Graham Stratton — Fri, 13 Oct 2006 09:23:00 +0000

Until recently I hadn’t realised that there is an issue with file uploads, but now I have and there definitely is.

The problem is that it’s very difficult to give the user information about the progress of their upload, and if she is uploading a large number of large files this might be an issue.

Photobox have gotten round the problem by writing a java applet which is responsible for uploads, but this is overkill for many projects. (But it does also allow users to efficiently upload large numbers of images). Facebook also have a java uploader for bulk uploads. Single file uploads use the iframe trick (more on this later) to display a static message whilst the file is uploading.

Client-side javascript can’t control file uploads, since files are OS-level objects and JavaScript shouldn’t be allowed anywhere near them. Any information about the progress of an upload must come from the server. There are a couple of commercial projects which offer software to solve this problem. Both are Perl scripts. There are no PHP solutions since PHP does not provide any way to monitor the progress on an upload.

It should really be the job of the browser to keep the user informed about the status of uploads, but no browsers seem to do so.

Problems on Both Sides

So we need to implement something on the client side to display status information, and something on the server side to monitor the status of the upload. Finally we need to get them to talk to each other. Strangely enough, this bit is probably the easiest bit, thanks to AJAX libraries.

Client side

The problem on the client side is that when a form is submitted, the frame from which it is submitted blocks until the request is completed, so there is no way that it can display status information. A common trick here is to use a hidden iframe for the upload fields. There are also slightly more complex examples using multiple iframes. (An iframe, by the way, is an inline frame, such as is often used to produce a scrollable box within a page.)

Server side

Here things are even more tricky, as we need to measure how much of a file we have received, and then provide a function that the client can call to return this information. This is very complex, but not as restrictive as I may have once claimed.

Javascript libraries

Graham Stratton — Fri, 06 Oct 2006 11:22:00 +0000

Having decided that javascript is now mature enough to be worth having a look at, I needed to choose a nice javascript library. I liked the Mochikit screencast, but I thought I ought to know what else is out there.

I came across this rather good comparison of javascript libraries. After reading it I decided that sticking with Mochikit for a while was the way to go. I feel much better about that now that I have an idea of what I am missing elsewhere.

Bob Ippolito has ported many things such as effects from Scriptaculous to Mochikit, leaving the APIs unchanged, which means that switching to Scriptaculous at a later date might not be too hard anyway. But whilst experimenting, that interactive interpreter looks invaluable.

I’ve just viewed the Mochikit screencast again. It’s even better than I remembered it being! If you haven’t seen it you really ought to!

Straight Ornamental: Category Javascript

File Uploads

Problems on Both Sides

Client side

Server side

Javascript libraries