CFup build 090624 – now on github

It’s been asked that I release the source of CFup. Initially I was not comfortable doing so as I threw it together as a test of concept. Certainly nt my best work! Feeling inspired I cleaned up some of the code – mostly just so the ajax routines don’t clash – and uploaded it to github. Now anyone can download it, try it out, and contribute. I’m excited to see what optimizations and cleanups can be done to it. So if you’re interested in kicking the tires or helping develop it, check it out on github: http://github.com/WebVeteran/CFup/

ColdFusion file upload progress

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:

[media id=9 width=547 height=444]

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:

  1. Reset all variables and labels.
  2. Ask CF for the list of files in the temp dir.
  3. Start the upload, and start the timer.
  4. 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.
  5.  Every second, ask CF for the size of that file.
  6. Update the labels with the information every second (size, time, size/time). Use prototype to tween the size in 0.8s.
  7. 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.

For your convenience, I updated Visual Code Editor to have TinyMCE accept iframes and I put the live demo in one below. But if you prefer, here is a direct link: ColdFusion file upload progress.

So… what should I call this thing? CFup?