Normally when we give a user the possibility to upload files, we give them a nice SWF-based upload solution in order to provide some feedback about the progress. Recently we discovered that PHP has built-in support for this, with a little help from APC (an opcode cacher and memcached alternative).
This knowledge resulted in a library which does all the work needed for this automatically. All you need to do is initiate our JavaScript class, and all inputs are handled automatically. The library consists of a MooTools-based JavaScript class, a PHP file which handles all the AJAX requests and a CSS file.
Unfortunately this library (and APC support) doesn’t work on a default PHP install. The following things are required:
- PHP 5.2 or higher
- The APC PECL extension (http://pecl.php.net/package/apc)
- “apc.rfc1867 = on” in php.ini
After restarting Apache, download the library, which can be found at http://www.hoppinger.com/playground/progress.zip. Next step is to upload progress.php, progress.js and progress.css, include progress.js, progress.css and MooTools (tested with version 1.2.3) in the HTML <head>, and initiate the uploadProgress class for every form you want files handled by this.
Example:
<script type="text/javascript" src="/javascript/mootools-1.2.3-core.js"></script> <script type="text/javascript" src="progress.js"></script> <script type="text/javascript"> window.addEvent('domready',function() { $$('form.upload').each(function(o_form) { o_form.fileUpload = new uploadProgress(o_form,{ 's_actionHelper' : '/playground/progress/progress.php', 'i_interval' : 1000 }); }); }); </script></script> <link type="text/css" rel="stylesheet" href="progress.css">
This makes the library work for every form with class “upload”. As you can see, the class has two parameters, the first is the form object and with the optional second parameter you can set a few options:
- s_actionHelper – the location of progress.php
- i_interval – the polling interval for progress.php in milliseconds
The layout of the progressbar can be changed by editing progress.css.
When a user uploads the file, and all went well you can find the data JSON’ed in $_POST with the same name as the original <input>. If something went wrong (e.g. when the user doesn’t have JavaScript), the file information can be found where you would normally look, in $_FILES.
An example can be found here: http://www.hoppinger.com/playground/progress/index.php
Please note that this is the first version (0.1). Contact me (korstiaan [at] hoppinger.com or the comments) if you are missing features and/or found a bug.
