AJAX File upload Progress
Example of how to use the newest version is available in another post.
Update
There is a new version of this code that follows the same approach but uses HTML_AJAX instead of JPspan.
You can view the new demo, and view the code in websvn.
Also note that the server isn’t setup to accept files larger then 8meg, so anything bigger will fail.
Also I’m looking for someone to help me improve the error handling, if your interested in getting involved and making some regular releases of the new code let me know.
Original Post below
A couple days ago I found an interesting ruby on rails project. It uses AJAX to update a progress bar as the file uploads. The trick is a patch to rails for getting upload status and doing the upload in an iframe so that the main page is still active.
So to replicate this I just had to find a patch that provides upload status in PHP and then implment my little iframe upload widget.
I found the PHP with a little work from google: Upload Progress Meter
First you need to install the patch and the extension, the included instructions are easy to follow. The only problem I found is that: upload_progress_meter.store_method = “file” had to be set in my php.ini before thing would work.
I also ran into a JPSpan problem, if your having network problems the status call might take longer then 1 second, and you’ll get Call in Progres error alert. This can be fixed with the current version of JPSpan but i’d like to see some api added to help. The proxied objects need some type of inProgress call to make this an easy fix.
One item of note is that the extension only provides information in a way to provide 1 progress bar per form no matter how many files. The javascript code is setup so multiple forms could be on a page at once and both uploading, but this hasn’t been tested.
Here is the demo you’ve been waiting for, for most connections a 250k file will be enough to see something besides connecting and complete.
Also if anyone has the time and skills to review the php patch and see what it would take to get integrated, please let me know. I haven’t heard from its author so I don’t know why its not integrated but it just seems crazy to have a 3K patch that is this useful only available to those who are willing to patch.
Code walk through
So the basic flow happens like this.
Display a page with a form:
this page has a hidden iframe, a hidden progress div, and some extra javascript code
Select the file to upload and submit the form:
The form has a target of the hidden iframe so even though the throbber starts the main page view won’t be getting new content when the upload is done.
The form onclick handler fires a setup function:
The function finds the progress div and shows it, it also registers a function to update the status ever second.
The update function fires every second:
This functions checks a counter to see if there are any more divs to update, if the counter is 0 it stops the update function from firing again
The function creates a remote proxy object to the php class UploadProgressMeterStatus if it hasn’t already been created
The function calls the get_status method on the proxy object with a list of all the progress divs and UPLOAD_IDENTIFIER’s that we need status for.
The function exits
The get_status method on the php class is called
The method calls upload_progress_meter_get_info() for each passed in identifier, the information is formated to a percent and a message which is returned
The callback function for get_status is called when the PHP class returns data
The callback updates the progress div
If were at 100% the we decrement our progress div counter and remove us from the list of divs to be updated
The iframe can also load a page once the file upload is done, it doesn’t currently do anything.
Example Code
This is really the only interestin php code in the project, and its not that interesting. When you have the Upload Progress Meter extension installedany form that is doing a file upload and has a hidden var called UPLOAD_IDENTIFIER can be tracked. The identifier has to be passed into the upload_progress_meter_get_info function so you have to keep track of it on the javascript side. Here we just pass those ids in, do a bunch of formating on the resulting array, and return the results. Note the returned array isn’t documented anywhere so this code and the code in the example php code provided with the extension is the best place to start if you want to do something else with it.
<?php
/**
* Get the status of all uploads passed in
*/
function get_status($ids) {
$ret = array();
foreach($ids as $id => $upId) {
$ret[$id] = new stdClass();
$tmp = upload_progress_meter_get_info($upId);
if (!is_array($tmp)) {
$ret[$id]->message = "Complete";
$ret[$id]->percent = "100";
break;
}
if ($tmp['bytes_total'] < 1) {
$percent = 100;
}
else {
$percent = round($tmp['bytes_uploaded'] / $tmp['bytes_total'] * 100, 2);
}
if ($percent == 100) {
$ret[$id]->message = "Complete";
}
$eta = sprintf("%02d:%02d", $tmp['est_sec'] / 60, $tmp['est_sec'] % 60 );
$speed = $this->_formatBytes($tmp['speed_average']);
$current = $this->_formatBytes($tmp['bytes_uploaded']);
$total = $this->_formatBytes($tmp['bytes_total']);
$ret[$id]->message = "$eta left (at $speed/sec) $current/$total($percent%)";
$ret[$id]->percent = $percent;
}
return $ret;
}
?>
On the javascript side there is a bit more code, but none of its all that complex. This code is used to show the progress bar and give it some initial values. The main things to notice are that were add an update method to the div, this is a nice trick since it allows for runtime extension of objects in the DOM, and it will make updating things nice and easy in the other functions. Were also adding a getFirstDivByClass method to the div, I’m doing this so I don’t have to have so many divs to track, the classes only have to be unique inside the progress bar for this to work and thats much easier to achieve.
/** * Shows a progress bar and sets it to 0 */ function UploadProgressMeter_EnableProgress(progress_id) { var progress = document.getElementById(progress_id); progress.style.display = 'block'; progress.percent = 0; progress.message = "Connecting"; progress.update = function() { this.getFirstDivByClass('bar').style.width = this.percent+'%'; this.getFirstDivByClass('message').innerHTML = this. message; } progress.getFirstDivByClass = function(className) { var nodes = this.getElementsByTagName('div'); for(var i = 0; i < nodes.length; i++) { if (nodes[i].className == className) { return nodes[i]; } } } progress.update(); }
The code below calls the remote proxy and creates the callback function to handle the results. The is one area where improvements could be made. First there should be a check if there is currently a call in progress. Then it might also be smart to call the server less (especially on large files) and just generate the stats from the current download rate. This would add some complexity but would allow the progress bar to update smoothly and would allow the server calls to get down to once every 5 or 10 seconds.
If you don’t do a lot of javscript programming its worth nothing the use of for(var prop in result) and delete UploadProgressMeter_active[prop];
for(var prop in result) is how you loop through the properties on an object, this allow you to use them as associative arrays (just watch for methods on the objects since you’ll loop through them too).
delete UploadProgressMeter_active[prop] is the equivalent of unset($array['key']);
/** * Update the progress bars of all the current bars */ function UploadProgressMeter_Update() { if (UploadProgressMeter_count == 0) { clearInterval(UploadProgressMeter_intervalId); UploadProgressMeter_intervalId = false; return; } if (UploadProgressMeter_remote == false) { var callback = { get_status: function(result) { for(var prop in result) { if (prop != "toString") { document.getElementById(prop).percent = result[prop].percent; document.getElementById(prop).message = result[prop].message; document.getElementById(prop).update(); if (document.getElementById(prop).percent == 100) { UploadProgressMeter_count--; delete UploadProgressMeter_active[prop]; } } } } } UploadProgressMeter_remote = new uploadprogressmeterstatus(callback); } UploadProgressMeter_remote.get_status(UploadProgressMeter_active); }
Code List
Updates
You may have noticed that the demo has stopped working a couple times. This was related to 2 things and there things you might want t think about if your going to use the patch. First it writes tmp files and fails silently if the directly no longer exists (darn /tmp cleaning scripts). Second its on my php5 server which has some users who are pushing the envelope which required me to upgrade to the php 5.1 beta and I forgot to repatch. Repatching wasn’t a big deal though I did have to move where a function was declared to get the extension to compile in gcc 4 (I upgraded to fedora core 4 as well).
Anyhow the demo is working and it should stay working as long as I remember to repatch with each upgrade.
New Version
This code has been updated to work with HTML_AJAX and to handle error conditions better. I haven’t done a formal release but you can grab it from svn.
Check it out from: http://svn.bluga.net/HTML_AJAX/UploadProgressMeter/trunk/
Or use websvn to get a tarball: http://websvn.bluga.net/wsvn/HTML_AJAX/UploadProgressMeter/trunk/?rev=0&sc=0
Also if your interested in helping out with the Upload Progress Meter let me know
[...] t 2 joshua si sta divertendo sempre di pi con ajax, ed adesso sta sviluppando un piccolo indicatore di upload. caiuz
Questo me [...]
Hi Joshua!
It’s really interesting to see, how a paradigm change(AJAX) changes the requirements of a serverside scripting language (Upload Progress Meter patch). I think one need to re-think the limits between “serverside” and “clientside”…
I wish if there were such progress patches to background SQL or socket processes… I think this is the only thing left to seamlessly integrate serverside processing into the client GUI.
NP
I have installed the upload patch and got it to work as well. I read that the author had submitted it to the PHP Group, but that there were both problems getting it in 5.0.x releases (too much else to do) and that it was not thread safe as I recall. Not sure what the status is now.
I like the Ajax idea.
Hello, I reached to the same solution, using that patch. Sadly, sometimes is hard to patch PHP (eg. no shell access, wierd php builds like Ensim Webpliance, no admin rights and other stuff).
Another possible solution to this would be to use Apache Hooks (similar to PERL’s Apache::UploadProgress, see more at this link http://www.omniti.com/~george/talks/Apache_Hooks-PHPCON2002.html) but the progress for this feature of PHP seems to be stalled).
Another would be to use the hook features available in PERL, calling PERL objects from PHP using this PECL extension: http://pecl.php.net/package/perl
Also, please stop using this ugly term AJAX, we don’t need another term for JavaScript RPC, AJAX is a toilet cleaner or a soccer team and a hype that I hope will vanish soon.
Like I said before, I’m not a big fan of the term, but its the term. Me uses it or not using isn’t going to change that. So since I can’t affect its usage im going to use the term that helps people know what im talking about and help people find my writings in google et al.
Emil: I don’t really see non default extensions as the solution either, I just don’t see Apache hooks ever getting stable and though the perl trick is interesting I don’t see many people (including me) wanting to use a hack like that to do. Hopefully I can find someone to fix the patch and get it integrated.
Hello , I have started programming with php in AJAX framework.
I want to know that is there any AJAX tools for PHP 5,something like JPSPAN that maps php5 classes to javascript world.
Thanks for your good weblog
JPSpan works just fine in PHP5, i have a project using it actually. It won’t run under E_STRICT but thats not a big deal since JPSpan code only gets run in the server script so you can easily special case its error handling.
Hello,
This looks really great. But i had a problem when uploading the file. I get a javascript error saying [Client_Error][404] Microsoft-IIS/5.1 while calling uploadprogressmeterstatus.get_status(). I just need to know where will be this file uploaded?
Thanks & Regards,
Sriram.K
I haven’t tried the patch with IIS maybe there is a bug.
I had a problem when uploading the file. I get a javascript error saying [Client_Error][404] syntax error while calling uploadprogressmeterstatus.get_status().
local error:
[Client error] [404] microsoft IIS/5.1 while calling uploadprogressMeterStatus.get_status()
Are these errors trying the demo my server or locally. If it locally have you tried the demo that comes with the patch to make sure its installed and setup correctly.
In my server don’t work I have php 5.0.2, and I have the same error. Please somebody help my.
I’d love to help but I need a bit more feedback.
Is the problem applying the patch, or something else.
Your demo doesn’t work.
it goes from 0 to 100%
As I demo this in firefox 1.04 and IE 6 I see the bar instantly jump to Completed just as the file begins to upload. This seems to be the case with files of any size. Why might this be happening?
Its fixed now, the extension writes the file data to a tmp file, apache no longer had permission to write to that file.
Hi Joshua,
I tested your Demo on your Server and it only works in Internet Explorer(Win) for me.
Firefox at Linux shows me this Error: [Client_Error] Call in progress
And a litle later this one: [Client_Error] Operation timed out: get_status while calling uploadprogressmeterstatus.get_status()
Opera at Win creates this Error: [Client_Error] Unable to create XMLHttpRequest
And Opera at Linux this one:
[TypeError] Statement on line 601: object required
Backtrace:
Line 601 of linked script http://php5.bluga.net/progressDemo/demoserver.php?client
this.http.setRequestHeader(”Content-Length”, this.body.length);
Line 304 of linked script http://php5.bluga.net/progressDemo/demoserver.php?client
request.prepare(this.xmlhttp);
Line 897 of linked script http://php5.bluga.net/progressDemo/demoserver.php?client
this.__client.asyncCall(request, this.__responseHandler, callName);
Line 885 of linked script http://php5.bluga.net/progressDemo/demoserver.php?client
return this.__asyncCall(this.__request, callName);
Line 961 of linked script http://php5.bluga.net/progressDemo/demoserver.php?client
return this.__call(url, arguments, “get_status”);
Line 136 of linked script http://php5.bluga.net/progressDemo/UploadProgressMeter.js
UploadProgressMeter_remote.get_status(UploadProgressMeter_active);
At unknown location
[statement source code not available]
I’m not surprised by errors with Opera, i don’t think it has close to a working xmlhttprequest client until you get the newest version. Anyhow workaround for those problems would be patches to JPSpan. The timeout you got on firefox on linux sounds a little odd, that means the call didn’t complete within 3 seconds i think. Is that machine on a slow internet connection?
Hello,
i have a problem applying the patch. I use xampp and WinXP. Can anyone help me?
Of course i get this error without the patch:
[ClientError][404] syntax error while calling uploadprogressmeterstatus.getstatus().
but the install instructions are only for unix systems…
[...] den. Damit lassen sich recht beeindruckenden Internetanwendungen erstellen. Als da wären: Upload Fortschrittsbalken und eine Diapräsentation zum Thema Ajax. [...]
Hi Joshua,
Could you help me out? The progress bar keeps jumping from 0 to 100 instantly and I don’t quite understand how to save the file to a location on the server.
Could you help me out?
Thanks for this project.
Daniel
If the bar jump from 0 to 100 either your testing with too small of a file for your connection (could be quite big testing on localhost) or the patch and extension aren’t working right. Check and make sure a file is created in /tmp while an upload is taking place.
To save the file to a location on the server use move_uploaded_file just like you would without the progress monitoring.
hey Josh,
I got it to work! Thanx a million. Turned out testing on localhost was just too fast for the progressbar to get going
Then I found this program called Charles that can throttle your bandwidth to any speed you choose (it’s great for debugging purposes). And there was my upload-progressbar
Bless ya. Daniël
Daniel, would you mind posting a link for that program, it sounds very useful.
Sure. Here it is:
http://www.xk72.com/charles/index.html
BTW, is there anything I can do about the “[Client_error] Call in progress”? It pops up every now and then… I suppose I could just suppress the error by not calling alert, but is there some way to fix the problem more thoroughly?
Thats caused because currently JPSpan only supports one call at a time. For an app like this the simplest thing to do is add a clientErrorFunc to your JPSpan javascript object and catch that error.
See the JPSpan wiki for more details: http://jpspan.sourceforge.net/wiki/doku.php?id=tutorials:errorhandling
Just tried 500kb, 1.4mb, 5.9mb, and 300mb files - all said “complete” within seconds on your demo page.
Something’s not quite working, methinks, unless my ISP drastically upgraded my upload speed… :p
Firefox 1.0.4 on a Mac Mini.
Ok so here is a neat trick, the extension writes to a tmp file, i had it set to use a directory in /tmp for its storage. Every month some script was killing everything in /tmp. I moved the tmp file to a place that won’t get destoryed.
The demo is working again.
Where are the files that I choose to upload actually uploaded to? Or is the code to upload the file missing? I can’t seem to find any move codes.
Jesse: to the normal php file upload location, im just ignoring them in the demo. The page your posting the form too would handle the file using move_uploaded_file just like normal.
Hi Joshua,
I tried your demo (on your site) - Mac Safari and Firefox give this error:
[ClientError] Operation timed out: getstatus while calling uploadprogressmeterstatus.getstatus()
This is on a 2MB ADSL connection, uploading a relatively small file.
The demo is broken again due to an upgrade to php 5.1, thats the problem with patches, you have to remember to apply them at every upgrade.
Is there a way to use this on multiple files? I have a routine that the user can indicate the number of files to be uploaded and then is presented with the number of Browse inputs that they want. I would like to show the progress of each file as it is being uploaded.
Any ideas?
I believe it will run the total percentage, check the website of the patch is has a multiple file upload example.
I have a similar requirement to Lukes (display progress of multiple files download) and I am using AJAX. I have a web application module where the user can indicate the files to be downloaded and while the files are retrieved from a remote server I would like to show the status of each file as it is being retrieved (completed/failed).
I am currently doing this in the same way mentioned by you above but my problem is that the minute the hidden forms response object returns the XMLHHTPRequest loops ends ie it doesnt continue trying to find out if all the files have been retieved. I cannot understand why. shouldnt two different frames submit be independent of each other?
Please respons asap. I need this to work!
Unnati: I haven’t tried using multiple iframes to solve the problem, but that seems like it should work.
Without seeing your code I can’t think of any tips, feel free to email me or post a link to the source and i’ll take a look.
look at http://www.nukermusic.com/pgbartest/fullphpsource/demo.php and were running iis 6.0. where do i get the patch for php? i tried to download it but the link is broken?
The patch should be: http://pdoru.from.ro/upload-progress-meter/upload-progress-meter-v4.1.tgz
According to the PHP Patch, how i do this on windows?
Sorry guys, am trying to track a friend, googled and got just this page!
and to her:
OOse, is that you? respond asap, I’ve been trying to contact you for long! the ID is anindya[at]siggraph[dot]org. cheers!
Hy,
It works with safari 2.0 BUT safari crashes after using it… Maybe the AJAX tech?
I would guess the crash is AJAX related, but im not sure. The two things I can think of that might be causing problems are something in the code is leaking javascript objects, or Safari doesn’t like using an iform as a form target.
Joshue,
Interesting hack youve go there!
I tried to implement it in vain.
I noticed there is a test.php.
What if the output is bool(false)?
Does it mean that I didnt install the patch the right way?
And when I go to /tmp/uploadbar/ is didnt see any text file. there shold be one created as a file is being uploaded……
At this point, its still jumping from 0-100.
Cant get it to work for the life of me.
Roy,
It sounds like your having problems with the patch, if you got it installed right you should see it in your phpinfo screen. I would also test things with the example code from the patch site since its simpler since there is no AJAX involved.
Hey Josh,
I think my PHP was semi patched.
On my PHPINFO, I see:
Upload Progress Meter
upload_progress_meter support : enabled
available backend modules : file
I tried the example code but the windows closed on me shortly after it popped up.
Im setting up an image hosting thingy so this thing is going to impress the uploader, when I get it working that is.
Well that looks right, does the livedemo code in http://pdoru.from.ro/upload-progress-meter/upload-progress-meter-v4.1.tgz work for you?
That is the example that I mentioned.
When installed on my server, the popup window closed the moment I start uploading a file of decent size (2 MB).
The demo on their and your servers worked really fine.
My server is just trying to be difficult !!
Im starting to believe in server gnomes.
i tried to apply the patch to php version 4.4.0, but failed.
does the patch work with php version higher than 4.3.10? any solution?
Quentin: You’ll have to wait until the patch author makes an update, i doubt the changes are big enough that it will take long, but you might try sending him an email.
Joshua, just wondering if I can pay you to install this mod.
I really wanted to get it working but my server is as obstinate as a mule, wouldn’t even let me enjoy a cool mod just for once.
Does it matter if it is a cPanel server? It shouldn’t right? Coz a server is a server, PHP is just PHP.
Roy: send me an email at josh@bluga.net and will work something out.
Hi Josh,
Is there anyway to implement the progress meter if you do not have access to the php.ini file (i.e. my site is hosted on an ISP which does not give me this freedom)
Thanks!
Johnny this solution is based on patching php to provide this functionality so its not really a possiblility unless you control the server. If you look around google there are some other projects that use a cgi or mod_perl to handle the status messages that might work for you.
Thanks Joshua, I’ll look around!
hello joshua!! how are you?
i’ve trying to use your php program and I had a problem:
when I try to upload some file its print an error:
[Server_error] Only variables shold be assigned by reference while calling uploadprogressmeterstatus.get_status()
you can help me?
Regards,
Well thats a php error, im not sure whats generating but I would try to make a test case for your code that can be run directly.
good man I can explain what i’ve did, i downloaded your package, and unzip into a directory and tryied to upload, i dont know if I need to apply any patch to php and do other things, do you have any tutorial to install your package??? do you want to talk by msn messenger and the solution we post here?
Regards!
Yeah you need to apply the patch and setup the extension.
how I do it? i’ve tryied to apply the patch and the extension but I have php-4.4.0 compiled on linux debian and i’ve compiled the php with the patch and the extension, how do you did those things to make it works???
Well I don’t see a version of the patch for 4.4.0, you can try the 4.3.10 patch im guessing it will still apply.
If your used to building apache/php by yourself and applying patches then you might not want to go this route.
The patch install instructions are included in the patch dir: http://pdoru.from.ro/upload-progress-meter/upload-progress-meter-v4.1/php-patch/INSTALL
Then build your php install. After that you need to build the extension, the instructions are included again: http://pdoru.from.ro/upload-progress-meter/upload-progress-meter-v4.1/upload_progress_meter/INSTALL
If you need more help then that, you’ll have to give me more details to what problems your having.
Hey Mr. Eichhorn, thanks for the demo. A php upload is exactly what I need. Unfortunately I am on a shared server (Dreamhost) and I don’t think they support extensions. I noticed on one of you side notes on (http://pdoru.from.ro/) about the “patch is no londer needed”. Murphically (law), the link or any info about this is not this. I am would like to inquire about this or if there is a solution that does not require such a patch. Your help is more than appreciated.
Inshan Khairullah
Well if you want a real progress bar (ie shows speed and % done) there aren’t a lot of options. You can either patch PHP and add in the extension or use another language that offers this support. I think mod_perl supports it out of the box, you should be able to find a package that helps with the php/mod_perl integration with a google search.
Hey, nice work, I am really impressed with the IFRAME implementation to provide the upload bar inline.
I have my own version of this, started with the same source code. My improvement to the patch is: optional MySQL — instead of storing the upload data in a file, store it in a MySQL table. This is helpful when you have many web servers sitting behind a load balancer and cannot gaurantee that each request for progress will come into the same server. So, for the same reason that MySQL stored sessions are popular, I made this patch have the ability to store it’s upload progress data in a MySQL database table.
Demo and Source Code available here:
https://www.modphp.org/viewtopic.php?t=324
I made a plug for you and your web log and gave link to your site.
Keep up the good work! I doubt you remember meeting me, I met you at a AzPHP users group meeting many months ago, so when I was searching for PHP Upload Progress Bar and saw your name come up, it caught my attention.
Dave:
Thanks looks great, at some point I’m going to write another article about this, I’ll make sure to include your updated mysql backend, that looks a lot nicer then the file stuff. If your interested on colloborating on this let me know, my plan is to do just a basic im uploading effect for people without the extension (since you know when things are done) and show actual progress for people that have the extension setup.
That way all those people out there on shared hosts or with no clue on howto compile PHP can still have something working.
Josh:
Yes, I may be interested in colloborating in a new version… I think the patch works, the hard part is refining the look and feel using IFRAMES, JS, XML (AJAX). For users that cannot patch their source code, what do you think of coming up with some way to estimate the users bandwidth speed before the upload starts (using AJAX, of course!). Use AJAX to perform a bandwidth test, so that we make the “fake” progress bar an estimation rather than a pure guess. The problem is that we need to know the size of the upload before it starts also, I don’t think we can get that with Javascript (or can we)? Have you tried xajax? Just curious, I looked at it yesterday, I like how it modularizes the XML parsing, makes it easy for the common folk!
As you know, I am the author of the patch that extends the one you used. My version of this patch uses MySQL as the storage module for upload data, instead of files.
You inspired me to do this: The patch doesn’t change, but after seeing your example and having a little time to chew on it, I wanted to develop a client of my patch that uses AJAX to display the progress bar. I also wanted to show the progress bar inline (instead of in a pop-up). So, after weeks of thinking about it, I finally did it. I am using XAJAX to constantly refresh the upload progress bar. I display the upload progress inline in an iframe, that refreshes it’s data through XAJAX. Thanks for the insight, this post was my inspiration to do it! I hope it helps somebody out.
Source code and demo here: http://www.modphp.org/sutra664.php#664
my project: UGiA PHP UPLOADER
Show the real progress bar and uplaod unlimited files in php. no need of path, not need of other language, only php.
screenshot: http://www.ugia.cn/?p=70
project page: http://sourceforge.net/projects/upu
i had the problem with the upload status function always just returning bool(false) all the time, but the patch was installed right and i had followed all other instructions.
after much hairpulling and bad words, i scrolled thru the entire php.ini file, and lo and behold, found ANOTHER upload related var outside the upload section of it.
post_max_size. it was set to 8, and files larger than that are just ignored by php if you try to upload them.
i changed this to 1000M (like the upload_max_filesize, i am building a site that will get large uploads), and the progress bar FINALLY starts working.
so a tip for others with this problem:
make sure your upload_max_filesize and post_max_size are set right.
I am facing the following problem in Opera running
on Fedora Core 3 Linux
if you go to musicindiaonline.com and try to play any song
the following error comes:
Javascript Error: Methods missing!
Please suggest a way around so that I can play the songs.
Ranjan: i don’t see how errors on a site i didnt’ work on fit with anything related to the js upload code
Dear Joshua,
Thanks for the reply. I searched the web and there is
a workaround (NOT a solution!!) at the site:
https://helixcommunity.org/forum/forum.php?thread_id=1483&forum_id=6
and they say that at the Realplayer open URL the following link is to be put:
http://www.musicindiaonline.com/g/r/34CmOP_vaQSplbDx.iaBCsKG8yY5ZW4bXq8I9U_ERE90/play.smil
This is working but as mentioned earlier, its not the final solution.
Maybe you can help.
Regards
Ranjan
Is the patch required for php 5.0.4?
The patch is requited for all version PHP. If the patch makes it into a released version i’ll let you know.
I installed the PHP patch in PHP 5.0.5 and recompiled it and I had several problems with your demo. Most of the problems were because the INSTALL and README files said the upload meter was called upload_progress_tracking and it is upload_progress_meter.
So, I run into the problem of the bar going to “Complete” seconds after starting the upload. I noticed the tmp directory was created ok, permissions were fine and everything. The patch showed in phpinfo, everything enabled, but nothing worked. Why? because my settings in the httpd.conf were “upload_progress_tracking*” and the extension setting in the php.ini was “upload_progress.tracking.so” instead of “upload_progress_meter*”.
Now everything works fine, after about 2 hours of wasted time
BTW, for the “[Client_error] Call in progress” problem, a quick solution is to add these following line to the UploadProgressMeter.js:
Just below the line:
UploadProgressMeter_remote = new uploadprogressmeterstatus(callback);
Add these line:
UploadProgressMeter_remote.clientErrorFunc = function(e) { return false; }
Dirty solution, but it works.
After working a while with this upload progress meter, which works pretty well I must say, I have trouble detecting incomplete files.
How could you detect an incomplete upload?
If I press “stop” while uploading a file in the browser (forcing an incomplete upload):
1.- The upload progress meter says “Complete”.
1.- The form “action URL” is called (why?).
2.- is_uploaded_file($_FILES['upload']['tmp_name']) == true like if the file was complete.
3.- $FILES['upload']['error'] == UPLOAD_ERR_OK like if there were no problems at all.
Is there a way to detect the incomplete file, so the “URL form action” is not called and the upload progress meter says “Incomplete” ?!? (can’t really figure it out).
Naikel:
First of all the form action has to be called thats how the file is uploaded. File’s can’t be submitted using XMLHttpRequest, they have to be submitted using a form. You just use a hidden iframe so the main page doesn’t reload.
As far as status goes and detecting errors check out the updated version that uses HTML_AJAX
http://websvn.bluga.net/wsvn/HTML_AJAX/UploadProgressMeter/trunk/?rev=0&sc=0
You can grab a tarball download right from the svn viewer. Or if you want to check it out just goto:
http://svn.bluga.net/HTML_AJAX/UploadProgressMeter/trunk/
You can install HTML_AJAX using the pear installer
I’ve got the patch installed, but i’m getting this error, which is the same as the error i was getting before the patch.
On PHP 4.4.1 Apache 2
-[server_error] only server variables should be assigned by reference while calling uploadprogressmeterestatus.get_status()
While these messages are very useful, I wish it gave any sort of idea to where the error born, so I could attemp to locate it.
Thats a reference warning, stupid php 4.4
Are you trying the new version that uses HTML_AJAX with the newest version of HTML_AJAX
AJAX is not a framework. It’s an acronym for Asynchronous JavaScript and XML.
Hello,
I’m using Apache 2 with PHP 5.0.4 over Windows XP.
I untar/unziped the package UploadProgressMeter.tar.gz into a directory under Apache. Tested the file demo.php in the archive : browsed for a file to upload and click the ‘Upload File’ button. I’m getting the following message box error :
[Server_Error] Syntax error while calling uploadprogressmetterstatus.get_status()
How can I fix that problem ? Thank you
Try grabbing the newest version from SVN it should handle those error conditions in a nicer manner.
You can get a tarball from: http://websvn.bluga.net/wsvn/HTML_AJAX/UploadProgressMeter/trunk/?rev=0&sc=0
or just check it out: http://svn.bluga.net/HTML_AJAX/UploadProgressMeter/trunk/
I have sample up and working, but not very good with the javascript and iframes. I know php very well though. My question is where do I put the code to handle the uploaded file? The form is never offically posted to action page in form tag so code never gets executed. I also tried to modify the class and add function called processfile() which was triggered at 100%. The problem was the $_FILE variables where never set. I know this is probably simple question for most, but having little trouble figuring out where to put process the file code.
The file is uploaded to the action, it just happens in the iframe so you don’t see the results. For testing you might want to update the iframe code so that its visible instead of hidden.
Joshua thanks for the help. I figured out how to enlarge the iframe so could see the output and debug. It was just simple logic error on my part.
Hi!
Its really a good application. I’ve downloaded the original one as well as the newer version and made changes to the older one. Its working fine, only the blue progress bar; but the problem is with the data summary below the bar. It is not showing me the summary. I’ve tried my best to get what the problem is but I cann’t. Please tell me what to do as it is needed urgently.
one more thing, when I’m loading my page it is giveing me JS error: ‘HTML_AJAX’ is undefined. I’ve also copied the HTML_AJAX folder to the main folder and configured it but this error is not solving.
Many Thanks,
Himanshu
Again, I’ve not installed any patch on my system, just Apache-1.3.14 & PHP-5.1.1 and then copied the upload folder to apache folder. Is there any need to install the patch first before this application or it’ll work fine without installing? If yes, please let me know the path where I can find the patch as well as the instruction to install and complile. I’m working on windows NT system.
Waiting..
Himanshu
The newest version should work without the patch but you can’t get progress information without it.
You should be able to update it too provide some kind of im uploading icon and then a done message.
[...] Pasek postępu przy uploadzie plików Kategorie: Ajax, PHP, SkryptyI poraz kolejny pomoże nam w tym ajax. Przeglądałem sobie różne strony o ajaxie i trafiłem na ten prosty i przydatny skrypt. Opis, demo oraz źródło można znaleźć tutaj. Niestety jak pisze autor skrypt testowany był tylko w FireFox, nie wiadomo jak zachowają się inne przeglądarki. Jednak mimo wszystko warto na niego spojrzeć. Dodał: Szen [...]
apache 2.0.54 PHP 5.0.4 LibGD 2.0.33 - Mac os 10.4
After making sure i compiled using the php 5 phpize and I had to add static int check_identifier(char * identifier) to be declared at the start of the C file, I now get the following error on starting apache
dyld: lazy Symbol binding failed: Symbol not found: _upload_progress_register_callback
referenced from :/usr/local/phpexten/upload_progress_meter.so
expecred in :flat namespace
any clues as to what this is now complaining about ?
Sounds like you have the extension compiled fine, but are missing the patch on PHP.
In the new firefox 1.5 (deerpark) the progress meter dies around 95%. This is not happening in IE 6.
My guess is that the /var/uploadbar/upl_{$upId}.txt no longer exists.
I tried these two bits of code in the ID loop of the getStatus method of the UploadProgressMeterStatus:
if(!chmod(”/var/uploadbar/upl_{$upId}.txt”,0777)){
$ret[$id]->message = “File Error”;
$ret[$id]->percent = “Probably Done”;
break;
}
if(!file_exists(”/var/uploadbar/upl_{$upId}.txt”)){
$ret[$id]->message = “Complete”;
$ret[$id]->percent = “100″;
break;
}
neither of them worked. Also, I had to add @chmod(”/var/uploadbar/upl_{$upId}.txt”,0777) in the top of the loop, to set the file readable. Do you know how I can fix the php setting to make this file readable to the upload_progress_meter_get_info() extension?
I’m guessing that is the problem. Any thought on why FF is killing the script but IE finishes it?
-Pat
Well that file is created by the file upload extension so I don’t see why browser differences would affect it in any way. Also once the upload is complete that file is deleted so looking for it isn’t a good debugging method unless your doing uploads that take a large amount of time.
Permission wise just make sure that PHP can create files in /var/uploadbar, they will automatically get created with the right permissions.
But again, if it works in IE but not in FF then its not a problem with the extension, its with some other part of the code.
I stand corrected, I did not need the @chmod in the getStatus method, but for some reason in FF 1.5 on my machine I’m getting the following at 95% for all uploads
In a FF popup:
A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete. [kill script][continue]
If I kill script, it will move to complete. If i continue script, the page stalls permanently. I went back to FF 1.02 and no problems, and no problems in IE. I wonder if this has something todo with the new FF.
Something in the new FF is triggering a bug. It sounds like your ending up in an infinite loop or something. Are you using the new version of the upload code from SVN or the older code.
I haven’t seen that problem using FF 1.5 running against the demo at: http://php5.bluga.net/UploadProgressMeter/demo.php. But thats the new version of the code that uses HTML_AJAX not the older version that used JPSpan.
It must be some unique combination of my internet connection and browser. I’ve test FF 1.5 on another machine (outside my network) and was able to use the script just fine. However, my setup is also failing on your demo site. Yes, I’m using the most recent version.
Same symptoms on your demo. Work in IE, not in FF 1.5
Weird
Patrick:
Either you have an extension loaded that is messing things up or you’ve hit a bug somewhere. If you have any error messages please email them to the HTML_AJAX mailing list: http://lists.bluga.net/mailman/listinfo/html_ajax-devel
If you can get a dump of the http messages that are being sent and returned that would be helpful as well.
Besides that im not sure how to get it fixed, I’m guessing were into debugging browser weirdness and that can be a hard thing to do over email.
hey, if someone has compiled php5 (any version) with this patch and it works, would you please email me jaimz(at)gi-tools.com i can’t seem to compile php at all. thanks in advance
Hey Joshua,
Thanks for sharing your work.
Looks like websvn does not allow tarball download. Can you fix it, please?
–
Chetan
websvn tarballs are fixed
Firefox - “client error: Call in progress”
over and over while uploading
file uploading is
/usr/share/dict/web2 (about 2.5megs)
I’ll file a bug if it lets me w/o registering for anything.
[...] This is very cool and extremely handy. If you’ve ever coded a form which requires a file upload, you’ll find this helpful. Plus, it keeps the unexperienced end-user entertained and appeased during the upload process (so that they don’t interrupt the load time). [...]
[...] For more information read the blog posting about this code [...]
very nice, i wonder so long to have something like this but it dont seem to work in firefox mac.
Inshan Khairullah: I wrote an article (with full source code) for how to create a progress bar in PHP using perl instead of patching php here: http://tomas.epineer.se/archives/3
Hi.
Does not work in Firefox 1.5 on XP.
Does not work in IE 6 on XP.
Both browsers just show 100% uploaded instantly after hitting the
Upload File button.
So…. for now: Would be nice if this was tested a bit more before offering to online users. Anyway, best luck with an updated version …
Interesting hack. The demo doesn’t actually work though, does it?
I’m testing with a 75 meg file on a 10 meg connection and it jumps from 0 to 100% straight away which is useless. Who cares about smaller files or files over 250k? It’s exactly the large files that I’m trying out that it should work with, but it doesn’t.
[...] There and Back Again » Blog Archive » AJAX File upload Progress [...]
Something broke the demo over the weekend, i’ll post an update when its fixed.
Update the demo isn’t broke, the max upload limit just got set smaller. And were not detecting the error properly.
The max file upload on the server is 8meg, im not going to change that since I really don’t want the server hammered more then it needs.
The new version contains a readme on how to setup php to work with larger files. http://websvn.bluga.net/wsvn/HTML_AJAX/UploadProgressMeter/trunk/LargeFileReadme.txt?op=file&rev=0&sc=0
Also note that detecting file uploading errors is hard in PHP since they don’t happen until the upload is done, even if the error is the file is too large.
[...] Por otra parte, aquí tenemos un interesante tutorial para hacer una barra de progreso de carga dinámica en Ajax. El ejemplo permite descargar el código. [...]
AJAX File upload Progress…
AJAX File upload Progress…
Hey, it works! Nice one.
Hello,
Is there any example for this involving multiple-file uploads?
Nice script by the way !
Rgds,
bonjo
Hi Joshua,
Is there any way to have an overall form with the file upload field, then, when the user hits Upload, collect the file, run the whole progress meter shebang, and then redirect to another page with the $_POST array being used so that I can actually process the file and do various other things (add entries to a db, etc)? The reason I’d prefer it as $_POST is to avoid variable injection by user…
Thanks!
-jB
Bonjomatic:
I don’t have a multiple file example, but it does work with multiple, but there is only one progress meter for the entire form no matter how many uploads your doing.
Jason:
I’m not sure what you mean here. The script that is targeted in the iframe gets the normal form post. You have _POST with all the info there.
Take a look at the new version, it will make that a bit more clear.
What I meant was, is there any way to have the overall page redirect somewhere. In your case, have demo.php refresh with new information, rather than the IFRAME; the reason for that is, if I just click Upload on the demo.php, it uploads the page, but overall stays on the same page - this might be confusing to a user, so I want to bring him somewhere completely different on the site.
Jason: you do this by adding onload javascript in the html rendered by the iframe. Look at the final status code on the new version, you could enhance that to also run your own javascript on the parent page when the download is complete.
You can’t submit a form two 2 places so all the processing needs to take place in the iframe target, with javascript from its onload doing anything else that is needed.
Hi there, nice work on this one.
I suppose there is still no hope to have the patch installed directly in official PHP versions? And if not, how do we install this patch on our servers? do you have a walkthrough?
Yusuke:
No the patch hasn’t been added upstream. I’m not sure why the PHP dev’s refuse to add a feature like this.
As for applying the patch the download at http://pdoru.from.ro/upload-progress-meter/ includes instructions. If you need more then that, i’m guessing you’ll need more of a walkthrough then I have time to provide. Also note that you at least get status feedback in the new version even without the patch.
While I see and believe the file uploads — I am not able to find it or where in the code (demo.php?) I would insert the standard upload logic.
e.g.
‘;
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo “File is valid, and was successfully uploaded.\n”;
} else {
echo “Possible file upload attack!\n”;
}
echo ‘Here is some more debugging info:’;
print_r($_FILES);
print “”;
?>
Wylie:
go look at the new version, its clearly marked there.
Hmmmm. I am using the SVN trunk
Sorry to have posted twice; feel free to delete. I am using the SVN trunk, but it is not obvious to me. “clearly marked” where? thanks. this is one of the best small php/upload/ajax pieces I’ve seen yet.
demo.php line 9
if ($fileWidget->uploadComplete()) {
// output javascript to the iframe to send a final status to the main window
// this will catch error conditions
echo $fileWidget->finalStatus();
// move the file(s) where they need to go
exit;
}
This code gets run in the iframe so you won’t see your output unless you unhide the iframe
Where is function upload_progress_meter_get_info?
I will be more explicit, actually. I understand that upload_progress_meter_get_info is part of pdoru’s work @ http://pdoru.from.ro/. The information is conflicting:
“Hopefully the patch will be integrated into PHP and in the future you will not have to rebuild php to make this work. In the mean time download this patch.”
However, there is comment that since PHP v4.3.7 and PHP5.0.0RC3 it is no longer needed. I suspect this means only the SAPI patch? And the rest of the patches and new build are necessary?
Wylie: the patch is still needed
Josh:
would you mind posting example for multiple file uploads? one progress bar would do …
Thanks.
There and Back Again » Blog Archive » AJAX File upload Progress…
Someone at Smarking has bookmarked your post….
Why messing with Ajax if you can do that using pure (D)HTML?
Look at XUpload, powerful upload progress bar.
Hi Josh,
I tried to install the extension, but I have a compilation error. I have just send an email to pdoru.
But I have another pb. When I add the following lines in the httpd.conf and restar t httpd :
php_value upload_progress_tracking.store_method “file”
php_value upload_progress_tracking.file 1
php_value upload_progress_tracking.file.filename_template “/tmp/uploadbar/upl_%s.txt”
but when I try the demo, the values are not initialize. What can I do ?
Fabs:
Try the new version it still gives some feedback even when the extension isn’t working. Also if the extension was never installed setting update_progress_tracking values won’t matter
Hi Josh,
Yes I’m working with the new version. Now my installation is ok, but when i upload a file (250ko) the bar jumps 0 to 100. This is ok because it is a small file. But when i search the file on my server, i can’t find it in the temporary folder upload. I don’t know what to do ?
Thanks a lot
Excuse me forget my last post, it runs now for the temporary files.
Thanks a lot for your great blog !
another question, I put in the demo my move_uploaded_file fonction after : // move the file(s) where they need to go
But nothing append.
I don’t understand why.
(Sorry for the flood)
I searched the whole internet for a trick to upload a file without reloading windows content. AJAX is helpless.
That attribute TARGET in the FORM tag do the damned trick
Thank you VERY much.
Serj,
Could you post example code of what you did?
Thanks.
Hi Joshua,
could you give me en example of the solution you provided eariler?
i quote:
Jason: you do this by adding onload javascript in the html rendered by the iframe. Look at the final status code on the new version, you could enhance that to also run your own javascript on the parent page when the download is complete.
You can’t submit a form two 2 places so all the processing needs to take place in the iframe target, with javascript from its onload doing anything else that is needed.
where to put the onload? and can i use: onload=” form.submit();” ?
thnx already!
How to upload FILE without reloading browser window:
——————————————————-
Filename
———————————–
Thus your form is being submitted to the window IFRAME, and your browser window remains intact.
Also you can track when IFRAME window will reload, and then you can read and parse answer from there.
If any questions appear, you can contact me via:
tiutiun AT moldova DOT cc
Update to previous comment.
My HTML code was wipped out I don’t know why
—————-
form action=”?” method=”post” style=”margin: 0px; display: inline;” name=”add_new_file” enctype=”multipart/form-data” target=”myframe”
iframe frameborder=”0″ height=”0″ width=”0″ scrolling=”no” id=”myframe” name=”myframe”
/iframe
—————–
I’m baffled as to why this requires 6 different scripts to run.
Charlie:
I’m not sure how you get too 6 scripts my count is:
1 script to produce the page the form is on
1 script to accept the form upload
1 script to accept AJAX calls and return upload status info
In theory you could combine it all into 1 php script but its still 3 seperate functions.
Hi Joshua,
Love your script, works great so long as you don’t try to have more than one upload going at a time. I tried two concurrent downloads(using the demo) and the progress stopped on both. once one of the uploads had finished, then the other began showing the progress that was remaining on it.
I am looking at using this in a commerical situation where multiple upload windows are required.
We would be prepared to pay for your time to make the script multiple windows / tabs capable. help ???
demo link is broken
http://php5.bluga.net/progressDemo/demo.php
Demo link is fixed sorry
Hello Joshua, if you need help with Ajax upload progress bar, you can contact us. We’ve developed Xupload http://www.sibsoft.net/xupload.html upload progress bar.
Thanks!
I have written an AJAX script that has worked well for a few projects of mine, and it’s completely free. I plan to keep it that way, as well. If y’all have any thoughts on it, I’m happy to hear about them in the forum.
hi
this is nice idea to use the progress meter i have run it successfully but i dont found the file which i m going to upload is uploaded anywhere in my pc …so is the file saved or not?? and is the uploaded file is saved then where is it??
how to upload second file without refreshing the browser??
one more thing,….here where ajax is used?? i think that is not used any concept of ajax
so why it is mentoined with AJAX???
Namrata:
You have to write the code where the example says handle file upload. If you take a look at the new version it will be clearer what to do.
At its most basic level AJAX is just sending data to your server without reloading the page. Were using 2 AJAX techniques to make this work. One is a form targeted at a hidden iframe. This lets us do an upload without reloading the page. The other is too poll the server using XMLHttpRequest to get the status of the upload so we can build that status bar.
On the patch front PHP 5.2 has support for the server side portion without a patch. It also gives us more information so the hacks that use perl can go away pretty soon.
We’ve tried to use an AJAX solution for an upload progress bar, but it proved too unreliable, occasionally it wouldn’t work on certain browsers, the vendor said this is because certain installations of IE can “break” AJAX. Is this true?
Searching the web, there doesn’t seem to be any sure-fire way of getting this functionality for large (>10mb) files, although I’ve not tried your solution yet. Is it 100% reliable, and cross-browser?
Hi, i tried your code. eg given on this link http://php5.bluga.net/UploadProgressMeter/demo.php.
but i am getting an error message while trying to upload the file, error is : [server_error]Syntex error while calling uploadprogressmeterstatus.get_status()
so, i got confused, what should i do.
And, yes what i have to do with patch, i mean you told that i have to install it on server, but how to install it, and exactly where to install it?
Harsh: For starters you want the new version of the code, its linked at the top of this post. Also you’ll need to install the patch or use php 5.2 and upgrade the status call.
hi, i cant use new version of code, because i dont want that progress bar in popup, i just want it as it is in old version. I have downloaded those files, can you ust explain me what changes i have to do after i have downloaded it? and where i have to put all the files? and how to install patch? Right now i have put the downloaded folder in my root directory. And it is giving a javascript error : [server_error]Syntex error while calling uploadprogressmeterstatus.get_status(), every second
I hope you got my problem.
hello joshua!! how are you?
i’ve trying to use your php program and I had a problem:
when I try to upload some file its print an error:
[Server_error] Only variables shold be assigned by reference while calling uploadprogressmeterstatus.get_status()
you can help me?
Regards,