It was about 2 months back when I started hunting for an upload meter “How To?” guide on net. Came across a lot of links actually but I must say none of them actually gave me what I wanted to have. Some talked of some patched PHP version to achieve the same and some talked everything except an upload meter.
Finally I was able to come up with the trick involved (thanks to sources on net and some work on my side). Here I will explain in short how can we achieve this on windows and unix both:
- APC (Alternate PHP Cache) : Before we go on to develop an upload meter we will need to have this component configured. Without APC its almost impossible to have an upload tracking script working on your server in PHP. Basically, when we upload a file to a server (windows or linux) the file first goes to the /tmp folder (DEFAULT) and then using the php’s move_uploaded_file($FileTemp,$FileUploadLocation) command we move that file from /tmp folder to the location we finally want it to be.Now the only problem is that, the file name in the /tmp is quite nondeterministic. There is no way to predict the file name in /tmp. Hence by simple methods we cannot track the status of upload for that particular file. We need a handler to that file, through which we can track its upload progress.
Although APC is not meant for this, but it does provide us a method to bind a unique name to this uploading file. Lets first see how to install APC on windows and unix.
- Installing APC on windows : On windows the installation process is quite simple. Simply download this zipped folder from here. Extract it and you will find, folders corresponding to each PHP version released. Identify your PHP version, copy the corresponding DLL file from that folder and place it under C:/PHP/ext and C:/Windows (if you have your php.ini file placed there).Now open your php.ini file, and add the following lines:
These lines must be placed after all the extension definition in the php.ini file. I won’t go into explaining the various parameters here, you can search for them and you will find plenty of documentation for that. As of now you can care only about apc.rfc1867=on (without this file upload meter won’t work, this tells APC to track file uploading) and apc.max_file_size=10M (this specifies max file size to cache which is otherwise 1Mb by default).
Now simply restart your apache server, and see your php information i.e. phpinfo(). You must see a section APC in the phpinfo(). If you can see that section, Congratulations APC installation is done for you 🙂
- Installing APC on unix (Debian or Ubuntu) : I have done this on debian and ubuntu, but similar must be the process for other OS too. Simply install the following modules:
- apt-get install apache2-dev,apache2-threaded-dev,php-pear,php5-dev,make
- ln -s /usr/bin/apxs2 /usr/bin/apxs (APC won’t install without this symlink)
- pecl install apc (input Yes if prompted)
- Add extension=apc.so in php.ini
- /etc/init.d/apache2 restart
- pecl upgrade apc
- /etc/init.d/apache2 restart
- Add apc.rfc1867=on in php.ini for tracking file upload
- Coding your Upload meter (index.php): So we are almost there. Just a few lines of code and we have our upload tracker ready. Let us first create an html form.
The code is self explainatory 😛 , if not I have put in some comments in there. Here is a short explaination again:
- upload.js file will handle the ajax calls later on and also will take care of incrementing the upload status bar.
- <input type=”hidden” name=”APC_UPLOAD_PROGRESS” id=”fileKey” value=”<?php echo md5(uniqid(rand(),true)); ?>”/> , this is the factor which allows us to keep a track of our file. This must always be declared before the file uploading input box. Basically it tells APC to associate value=”[SPECIFIED_ABOVE]” with the uploading file. This values serves as a key and using this key we will later on track the file.
- The form submits into an iframe. To understand more on this one read through one of my previous post on Gmail Type Attachment – How to make one? .
- <div id=”attachment”></div> contains the file chooser input box, which submits the form as soon as it receives a file to upload.
- id=”showProgress” and name=”frame” are self explanatory. I have used <div id=”upload-note”></div> to post upload error messages in case of an error.
- Coding your Upload meter (utility.php): utility.php is the file which handles the file uploading process. The form submits into this file through the iframe.
I have tried to include enough comments to make this code self explanatory. If you find any thing which is not self explainable kindly drop a comment and I shall reply to it.
In short this file takes the file size, file name, file tmp url. Check for the file, if its valid and within constraints. i.e. Max file size 10 Mb, File format jpg etc etc…..
- Coding your Progress Status script (progress.php): progress.php is the script to which we will make all the ajax calls, passing it the “filekey” defined in index.php above. Using that filekey it will return the upload status of the file associated with that key.Essentially, it returns 3 things. Done, Current, Total i.e. Done (meaning if the upload is complete), Current (meaning how much has been uploaded already), Total (meaning whats the total size expected).
In the middle we can see that it checks for the returned response. If response == “”, it means we made an ajax call even before the upload started. If response != “” AND response != “Success”, it means that the upload is in progress and we need to show the appropriate progress bar.
Progress bar is calculated based on the statistics returned. I hope its quite a simple one and again self explainatory.
The links which I found on internet were using hell lot of unnecessary things, just to make this progress bar. Some were using Yahoo’s YUI library, some JQuery and what not and I thought may be I should make it as simple as possible.
So thats it. Here you have your upload meter ready and running.
Download the source code from google code repository
Feel free to post a comment or suggestion for improvement. Or if in case the scripts doesn’t work for you.
Unfortunately I couldn’t provide a web demo as always for this one, as this site of mine is still on shared hosting and I was refused to install the apc package on the shared hosting. Anyways I have tested a enough on my VPS servers and it just works perfectly.
Enjoy and Thanks for reading till here 😉