While working on the File Manager, and the upload function in particular, I had in mind to create a nice upload progress indicator. And I don’t want to use Flash, Java, or anything special installed on the server. So this is what I came up with:
It seems pretty magical at first. But after I break it down here, you might think “oh yeah… easy!”. Here are the steps it takes to pull it off:
- Reset all variables and labels.
- Ask CF for the list of files in the temp dir.
- Start the upload, and start the timer.
- Using the list of files above, ask CF if the list has changed yet. Do this every second until a change is noticed. When a difference is reported, that is our upload-in-progress file. For this I used a CF function called ListDiff by Ivan Rodriguez. It compares lists (in this case, our initial and current dir) and returns the difference.
- Every second, ask CF for the size of that file.
- Update the labels with the information every second (size, time, size/time). Use prototype to tween the size in 0.8s.
- On the upload action page use a JS to stop the timer and report the success.
There is a bunch of optimization to be had. Mostly in the ajax calls which, although they have fault tolerance, aren’t to smart about it. And also in the management of when ajax calls are made (there is a chance they can step on each others’ toes).
The final product to be entered into the file manager will of course be much more subtle than this. Simply displaying the Size and Speed. When the upload is done, everything goes away.
So… what should I call this thing? CFup?