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?

19 Replies to “ColdFusion file upload progress”

  1. Interesting and creative solution, thanks for sharing. This is useful for low traffic sites, although I suspect that this wouldn’t scale well for high volume sites. Every request to ask CF for the current temp file size requires a trip to the server, and this assumes that there is only one new file in the temp dir, but if multiple concurrent files are being uploaded by multiple users then this cannot reliably report on the correct temp file. For scalability a client side solution would work best.

  2. @Steven Erat
    You’re 90% correct:

    * The site’s traffic is irrelevant. It’s the combined traffic on all CF sites on the same server that matters.
    * In order for the incorrect file to be reported, there must be two people starting (or finishing) an upload at the same time this script asks for the initial and delta dir lists.

    Other uploads in progress will not matter. Once that delta happens and the temp file is found, the script does not ask for the dir list again. It just locks onto the temp file.

  3. @Jorge Asch
    Yes, absolutely. On github. Eventually! I have my hands in a few pots right now. After the new tinyMCE ColdFusion compressor is released and found to be stable I’ll be able to come back to this project.
    I pride myself on quality. So I am not comfortable putting this code up just yet. It’s sloppy right now without much error trapping. The working demo above is vveerryy alpha!

  4. Great to hear. Yes, the above demo doesn’t even work for me (it seems to get stuck on a file that someone attempted to previously upload).

  5. Pingback: Anonymous
  6. @Kurt
    There is no download yet. It’s still very conceptual/prototype. I want to look into finding out the final file size before the upload is complete, if thats even possible. There are LOTS of improvements to be had in the way the temp file’s size is requested.
    So once it’s all cleaned up I will post the source in github.

    Thanks to everyone that asked for this source. It’s my 2nd most requested project (after gitPush). And I apologize for dangling this carrot in front of everyone. It’s just hard to find time to give to this project right now.

  7. This is a very interesting concept. I can understand the not being able to find time. Good Luck

  8. Any plans on releasing at least an alpha/beta version for us to try out? It’s been 6 months since the initial tease! hehe.

  9. @Jorge Asch
    You must be tired of that tease. So here is a new one for you. I plan to release this as open source on github! The code needs to be cleaned up a lot first though. The ajax calls in particular.

Comments are closed.