Simple File Upload Progress Bar with MooTools
Some time ago, I asked my friend about missing features in phpMyAdmin. One of the features, that he has been missing a lot is a progress bar in import section. Because I wanted to get to know the code and I wanted to learn how to work with MooTools, I decided to write my own implementation of progress bar.
First of all, I thought, that there might be an open-source implementation of the progress bar with MooTools framework. Unfortunately, the only working progress that I found was FancyUpload. FancyUpload is using SWF file for accepting POST form with files. Personally, I really dislike Adobe Flash related stuff on websites, therefore my only solution was to write it from scratch.
At first, I wrote PHP code for storing and obtaining data about the uploading file. I used APC and PHP5.2. If you are interested in the explanation of the process of APC and PHP5.2, Ellion Haughin’s blog entry might be a good starting point for you.
Thanks to the easy-to-use animation functions provided by MooTools (like FX.Tween), the progress bar is nicely animated.
If you are interested in the progress bar, have a look at the online demo (works for files smaller than 2MB, unfortunately my server does not provide suitable enviroment for APC anymore). Here is a download link. Feel free to use it.