Upload Progress Bar 100% PHP

Past weekend I entertained myself trying to figure out how would I go doing a 100% PHP upload progress bar without using iframes.

At the start my premise was this:

PLAIN PHP (Trying not to use extensions!)
PLAIN AJAX UPLOAD (Yes, the upload would've been done ALL via AJAX)
MULTIPLE FILES MULTIPLE UPLOADS MULTIPLE PROGRESS BARS! Yeah, Multiple!

Doing a bit of research I found out that the file object in javascript had some interesting properties like the following:

<input id="file" type="file" name="blah" onchange="interesting(this);">

function interesting(elm){

alert(elm.files.item(0).fileSize); //Gets the filesize in bytes for the loaded file
alert(elm.files.item(0).getAsDataURL()); //Gets the whole file as a base64 encoded string

}

As you might guess I've found the second (elm.files.item(0).getAsDataURL()) very interesting,
so the main idea was, "If i can get the file as a base64 encoded string I can send it through ajax without any problems, write to a file from PHP, get the amount of bytes written, then get a percentage and make a progress bar in a snap hah! Yeah I dont know about you but in my case I always start happy and then begin to complicate things :) (I think its a fact related to the very existence of programmers?)

However there were certain complications trying to send this data as $_POST data through AJAX.

Most of the time my struggle was based on getting $_POST data "as it arrived", now, "as it arrived" meant data to be dumped in the *very moment* as it was coming IN
I tried reading with $fp = fopen("php://input",'r'); while(!feof($fp)) $line = fgets($fp,2048); amongst other techniques like trying to use output buffering, but no luck. Later on I did some more research and found out that PHP is not able to read POST data in the manner as I wanted (as some kind of stream flushing it in as it arrived).

So, everyone pointed out me to use APC upload progress functions, but i didn't felt like installing apc just for getting a way of polling for upload progress, thats when I stepped with uploadprogress simply by doing :


pthreat@localshot:~$ pecl search uploadprogress

Retrieving data...0%Matched packages, channel pecl.php.net:
=======================================
Package Stable/(Latest) Local
uploadprogress 1.0.1 (stable) 1.0.1 An extension to track progress of a file upload.

Riiiiiiight, who would've thought so!!


I just had to do the following:

sudo su -c "pecl install uploadprogress";

Add the extension to /etc/php5/apache2/php.ini

echo "extension=uploadprogress.so" >> /etc/php5/apache2/php.ini

Then i checked out the examples available in the extension, and i came up with the following:

DEMO RIGHT HERE!

You can get the code here:

CODE RIGHT HERE!

I've called this uprogress, I guess i didnt wanted to be original this time :)

I still have to tweak a coupple of things, but it works in the overall.