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.

For me, the most interesting part of the code is MooTools AJAX code, which was something new for me. The data are requested every 1000ms by AJAX call. The transfer runs  in JSON format from PHP into JavaScript and then the data are parsed into separated variables and displayed on the website.

Thanks to the easy-to-use animation functions provided by MooTools (like FX.Tween),  the progress bar is nicely animated.

Derek Schaefer showed an interest in implementing the progress bar into phpMyAdmin, so stay tuned for upcoming phpMyAdmin 3.2!

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.