Today I decided I was going to build the asynchronous picture uploader for one of our new projects. I had installed the PECL Uploadprogress extension awhile ago and I just needed to build an example and then build it into our app.

However, my plan was spited by the opensource gods who delivered very little documentation about how to use the PECL Uploadprogress extension. So here is my quick writeup and example.

After crawling for 30 minutes through the C++ source of the Uploadprogress extension, I figured out what the heck was actually happening. The basic set of events is that an upload occurs. with that upload post is a hidden input that has a unique ID in it. The Uploadprogress extension then assigns the progress of that upload to that ID. Then when you call the uploadprogress_get_info() function with that unique id, the response is the upload progress. So, the two key pieces of information are this:

The function that accesses the upload progress is:

So the pseudo php code is like this



So I have created a working (at least on my server) example of this for yall to test. I have placed it in my code archive under php_upload_progressbar. This example uses prototype and YUI components to achieve totally asynchronous uploads and then has a CSS progress bar to handle the upload progress. The upload is through an Iframe using the YUI container.js and the updaters are using prototype. I imagine I could have used just YUI, but I know prototype better and it was easy to rock out in about thirty seconds. I have attempted to thoroughly comment both my progress.php and my upload.php so it should be somewhat clear on what is going on.

Let me know if you have questions or comments. I haven’t placed a live example anywhere because I don’t really feel comfortable having crazy people uploading random porn to my servers. however, I would love to help peeps that are having issues getting the example to run.

UPDATE: I have updated the urls - as the old ones have expired.