Simple File Upload Progress Bar with MooTools

Information about upload 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.

Possibly related posts: (automatically generated)

8 Comments

  1. Good work, Tomas!

    I would love to roll this into the PMA import system. Although, I would be happy to secede this task to you if you would like to tackle it, as this is your pet. =)

    -Derek

  2. Nice script!

    I saw your page through a link at Ellion Haughin’s page, but I am having a common problem with both yours and his methods. I have apc installed (extension=php_apc.dll), but the progress bar doesnt run at all. The files do appear in the temp folder, but that is it. Any suggestions on how to fix this?

    • Sid:
      I’ve just found out, that APC is not working properly with PHP running under FastCGI. Are you experiencing the same behavior that can be observed on my demo server? Try to upload a file there, you will see that progress bar is not working properly. It displays only 0% or 100%.

      I will do some testing on Windows server over the weekend. Are you running IIS or Apache?

      If you have a minute, please have a look at http://pecl.php.net/bugs/bug.php?id=12314 – you might find some useful information there.

      • I just retried your demo and noticed the same thing. The problem I’m having is that the progress bar doesnt advance at all. I am running it on my local machine, but that shouldnt make a difference because I’m testing it with a 700+ MB file. (I have my upload_max and post_max properties set to 1GB+).

        I am running it on a Windows Apache Server.

        What is odd is I’ve tried many different methods of showing a progress bar but none of them seem to render when using the examples shown on other sites. I will recheck my config, and will be getting remote hosting in the next week or so, then I can try again.

    • I’m not able to work with APC on Windows. Not at all. In case of apache, it simply does not work (PHP bug?) and combination of IIS+PHP+APC+RFC1867 enabled cases IIS to crash.

  3. Just note that the demo and download links don’t work. I would love to see this in action and run my own tests.

    • Thank you for your comment. I rewrote the script, so it can support different extensions for handling uploads. Currently, it supports APC and UploadProgress. I’m planning to add support for lighttpd 1.5+mod_upload.

      The links should work again.

  4. Thank you for sharing this code !
    I developped a multiple uploader with queue management based on what you did.
    If you want to have a look at what I did, just send me an email.


One Trackback/Pingback

  1. By GSoC 2009 – phpMyAdmin – Tasks for Week #1 « Tomáš Srnka’s Blog on 24 May 2009 at 11:52 pm

    [...] Tomáš Srnka’s Blog Welcome to my Google Summer of Code 2009 Blog! About « Simple File Upload Progress Bar with MooTools [...]

Post a Comment

*
*