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:

uploadprogress_get_info($unique_id);

It takes a string that is the uploads unique id. To set this id you include the following hidden input in your upload form:

<input type=”hidden” name=”UPLOAD_IDENTIFIER” value=”<?php echo $some_uniq_id; ?>” />

This sets the ID of the upload that the uploadprogress extension then can track. THIS IS VERY IMPORTANT. As far as I could tell, if you entered a different ID name, your uploadprogress_get_info($unique_id); will not work. If there is no upload, or it is complete uploadprogress_get_info() returns not a array.

So the pseudo php code is like this

upload.php

<form crap>
<input type=”hidden” name=”UPLOAD_IDENTIFIER” value=”<?php echo $some_uniq_id; ?>” />
<input type=”file” ……. />
<input type=”submit” …. />
</form>

progress.php

<?
$uniq_id = $_GET["id"];
print_r(uploadprogress_get_info($unique_id));
?>

so you would load up upload.php and upload a huge file. Then in another browser window you would view progress.php?id=$some_uniq_id and theoretically you would get a raw progress response from uploadprogress_get_info().

heh.

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.

[tags]uploads, ajax uploads, uploadprogress, pecl, prototype, php, yui, prototype uploads, progress bar, php progress bar, progressbar[/tags]

Related Posts