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.
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']);
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,
Irfan, try the new version
This is awsome, thank you sooo much
Hi Joshua,
If those who do not wish to install pear, is there any way to use the old version without getting the server_error?
Thanks,
Greg
Greg: If you don’t want to install HTML_AJAX using pear you need to set jsClientLocation on your HTML_AJAX_Server instance.
$server = new HTML_AJAX_Server();
$server->jsClientLocation = ‘/path/to/html_ajax/js’;
$server->handleRequest();
Hi Joshua,
Sorry to such a pain but I was trying to get the old version working (without HTML_AJAX) but I kept getting the server_error. I tried placing that snippet of code into the new version and got an error when trying to instantiate the class. Which file is suppose to instantiate that class? I’m sorry to be a pain, it’s just I have limited access to the server and I would really like this feature on my script.
Thanks for your help!
Greg
Greg: im not sure actually what you problem is but take a look at the installation section for HTML_AJAX in its manual – http://htmlajax.org/HTML_AJAX/Manual?#toc5
Hi Joshua,
I’m very sorry. I tried following the installation instructions, but I just do not seem to understand where I go about setting the jsClientLocation.
Thanks for your patience,
Greg
Greg: if your using the code from svn you would set jsClientLocation in demoserver.php
Hi Joshua,
After hours of trying, I finally figured out why that wasn’t working. The function is clientJsLocation and not jsClientLocation.
Thanks for your help!
Greg
Hello Joshua
You are great! my code is work, but I don’t know the file where going,
I find the note “//move the file(s) where they need to go” in demo.php, can you tell me if I want move the file to C:, How it’s going.
Thanks for your help!
Axin
Axin: Its just a standard PHP file upload at this point,
You use:
move_uploaded_file($_FILES['userfile']['tmp_name'], ‘new location’);
http://www.php.net/manual/en/features.file-upload.php
Hi
i am trying to do a myself php/ajax interaction, as i will understand how to manage all.
I’ve created a form like this:
//////////////////
//////////////////
a file demo.php
//////////////////
$file_name=$_FILES["file"]["tmp_name"];
echo “$file_name ok”;
//////////////////
and a file info.php
////////////////////
$data=uploadprogress_get_info(“18″);
echo “”;
echo var_dump($data);
echo “”;
////////////////////
if i reload info.php during the upload, i get :
NULL
Where am i wrong? shall i initialize the uploadprogress in demo.php?
many thanks for your help
Nik600
There are a couple possible problems.
One 18 isn’t the upload identifier specified in the form thats doing the file upload (hidden field named UPLOAD_IDENTIFIER)
The extension might also not be able to write to its tmp dir for whatever reason. The upload progress extension should be writing a entry in the apache error log saying what file its trying to write too.
Or it could be something else all togther im not sure what your setup is from your comment
Thanks to your reply.
here you can find exactly my code and my html (10 lines of code…), the blog strips some tags
http://www.webbins.it/files/getbyname/progress_upload.txt
i’ve tried both
uploadprogress_get_info(â€18″);
and
uploadprogress_get_info(18);
And your demo works correctly…
many thanks for your help
ok, i’ve understand where is the problem.
The hidden field UPLOAD_IDENTIFIER must be placed fist of the file field in the form.
many thanks
thanks, joshua, for all your hard work!
blessings…
[...] z.b. Perl. Seit PHP 5.2.0 geht es auch damit. Siehe: PHP: PHP 5.2.0 Release Announcement Joshua Eichorn’s Blog » Blog Archive » AJAX File upload Progress Bitflux Blog :: Upload Progress Meter extension for PHP 5.2 Mario __________________ [...]
Well done joshua
Well, it is really frustrating to read a comment that does not make sense. I really appreciate the effort and wisdom that the author put in the script, but if someone may clarify this comment by putting a sample script that works that would be great. I saw many users raised the same question but none of the answers gave a clear and working solution. I have tried to use
//
move_uploaded_file($_FILES['userfile']['tmp_name'], ‘./’);
//
and many other combinations but nothing works. Please advice. Thank you very much!!!
[...] http://www.whenpenguinsattack.com/2006/12/12/how-to-create-a-php-upload-progress-meter/ (for APC) http://blog.joshuaeichorn.com/archives/2005/05/01/ajax-file-upload-progress/ (for UploadProgress, good php code but not HTML code, please check the comments to see how write [...]
Joshua Eichorn’s Blog » Blog Archive » AJAX File upload Progress…
Joshua Eichorn’s Blog » Blog Archive » AJAX File upload Progress…
[...] La mejor combinación posible entre Diseño WEB y Traumas Personales. Inicio Progreso upload en AJAXEste artÃculo es la traducción del este AJAX File upload Progress [...]
Thanks Joshua, although it took me 2 days to get going this is what i found:
1) no patch is need when you have the latest PHP (5.2)
2) no extra security configurations are needed in http.conf (apache)
3) php.ini just needs the upload_tmp_dir= set
4) requires used in demoserver.php and Ajax.php need full proper paths if you are not using pear ..ie
require_once(getenv(‘DOCUMENT_ROOT’) . ‘/temp/HTML/AJAX/Server.php’);
5) REQUIRED !!!! moving files after temp:(mine disappeared before i could see them)
$uploaddir = “c:/temp/”;
$uploaddir.= $_FILES['upload']['tmp_name'];
//Copy the file to some permanent location
if(move_uploaded_file($_FILES["upload"]["tmp_name"], $uploaddir))
{
echo “I did some uploading”;
}
else
{
echo “There was a problem when uploding the new file “;
print_r($_FILES);
}
6) $_FILES['upload'], the ‘upload’ specifier must match the specifier in the demo form
7) Fan ENJOY
[...] trillado Ajax File Upload ?. Son mis primeros aportes al blog; traducciones amateurs textuales de AJAX File upload Progress y PHP AJAX File Upload Progress Meter Updates, en la que nos embarcamos para, en mi caso practicar [...]
Install HTML_AJAX (pear install HTML_AJAX-alpha)
Download PAFUPMU and install it somewhere accessible.
Hi,
Could these two things can be installed on a shared hosting.
Gajendra
Hello Joshua & Co.
I’ve installed the Skript, but I have the same problem like others before and don’t know how to solve it:
With the browser: IE7
PHP Version: 5.2.2
When page is loaded:
Error: Zeile 182, Zeichen: 1, Fehler: ‘HTML_AJAX’ ist undefiniert, Code: 0
While uploading:
Error: Zeile 167, Zeichen: 3, Fehler: ‘UploadProgressMeterStatus’ ist undefiniert, Code: 0.
I don’t know PEAR and AJAX really, but they should work. I think the problem is near line 166 of the UploadProgressMeter.js:
__________
UploadProgressMeter_remote = new UploadProgressMeterStatus(callback);
__________
and line 180+:
__________
HTML_AJAX.onError = function(err) {
document.getElementById(‘debug’).innerHTML += HTML_AJAX_Util.varDump(err);
}
__________
I really want to bring your skript to work, what could I do?
Sailcomp: I’m guessing you have a problem with your HTML_AJAX install, it looks like the stub class and or library isn’t getting loaded properly. Loading the javascript includes by hand is a good way to check for errors.
Hello Joshua
Now it works, thank you! I have still a question
The Progressbar goes always from left to right and from right to left. What should I do, that it becomes constantly larger? I saw it like this on a demo page.
Thank you!
Sailcomp
Joshua,
I am having some slight problems with the demo, along with what I have installed on my server. This happens both in firefox 2 and internet explorer 7. When I upload a file on a dialup connection, the upload bar starts with “Connecting” then goes to “Complete”, then starts showing the progress of the upload. When the upload is larger (ie ~500kb), the bar says connecting until the download is finished, then goes to “Complete”. Is this normal? Could it be some sort of bug? It only seems to happen on slow connections.
thenoob:
It must be some sort of a bug, i’m not sure what causes it.
Wow! This AJAX progress bar is by far the best and perfect working one that i found. Im going to Integrate this on my file hosting site. Thank you very for Joshua. You Rock!
I have a question..Why is not uploading my file? Goes to complete and the file is not in my server..
I have the same problem than sailcomb, everything goes fine, but the bars just goes left and right until completed, instead of showing the actual progress on the file.
I installed HTM_AJAX via Pear, is this a known issue or normal behaviour, do you know how can we fix this?
Thanks!
Cyp: You have to move the uploaded file at the end of the upload progress just like any other PHP upload script. There is a comment in the code showing you where to edit.
Pablasso: Did you install a progress extension, check the article linked from the top, the comments have info on what to do for php 5.2+
@Joshua, that was it, u couldn’t install the extension properly, because there’s no rpm or repository for php-devel 5.2+ on CentOS
I’ll need to debug on why installing php 5.2.3 from sources didn’t included the php-dev 5.2.3 headers
*stupid centos*
/s/u/i/g
If a file of around 2mb is selected and uploaded, the progress bar just goes to complete and it says upload complete but the process still runs on and upload progress is not shown. In case of small files, the progress bar becomes full and says upload complete, only then the bar becomes blank again and upload progress starts. Its not perfect. Is there any way of making a progress bar like Flickr’s?
abhijit: if your getting that something is broken, make sure your running 5.2 and the new extension for that:
http://php5.bluga.net/UploadProgressMeter/demo.php
Hi Joshua. Thanks for the script!
I have php 5.2.5 and I also get the same problem as abhijit. I have downloaded the uploadprogress -0.3.0 as you suggested and extracted xms files package and package2. I am not sure what to do with those files, and also I can not find the uploaded files, I have tried to search for them. Can you please tell me where they will be located.
Many thanks
Kriss: Do you have the extension installed – http://pecl.php.net/package/uploadprogress
Also make sure you download the newest version of the code from: http://bluga.net/projects/uploadProgressMeter/
Hi Joshua, I have downloaded the extension, I’m just not sure how to use it.
I have the latest version of the code.
Many thanks
Hi Joshua, I have also uploaded the xml package and package 2 to my server
Kris: you need to compile the extension, pecl install uploadprogress will do it
If your on a hosted setup you’ll need your hosting company to support the extension
If thats the case, there is support in apc extension for tracking things (http://us.php.net/apc) and that might be enabled already. You’ll just have to update the code to use APC’s rfc1867 stuff
Hey Josh… thanks for the nice work here!
I’ve been messing the code you provided, and I’ve gotten it to the point where either: A.) the progress bar jumps straight to completed or B.) the progress bar bounces back and forth like many XP “progress bars”. “A” seems to happen when I have the PECL uploadprogress extension listed in my php.ini. “B” seems to happen when I comment those things out and just HTML_AJAX and friends do their thing.
I’ve compiled the extension both by hand and from the “pecl install uploadprogress-beta” call, but both result in the same thing.
I’m fairly new most of these web technologies, so I could be doing something wrong.
My server is an Ubutu 7.10 box running the latest (for Ubuntu) PHP 5.2.1. Any thoughts?
Thanks again!
Ichibod:
Sorry I didn’t reply earlier
Without the progress extension you would expect the bouncing bar, there isn’t any data so the code doesn’t know when things are done.
If things jump straight to complete then there is something broken. I’ll see about writing up a how to of install things on 5.2.x but i’m not sure when i’ll find the time.
I’m wondering if all the patching done in PHP 5.2.1 broke the uploadprogress 0.3.0 extension. I was able to get it installed fine (PHP 5.2.5, centos) showing up in both the phpinfo() call and returning true from the extension_loaded(uploadprogress) call but when unloading a file I didn’t see either of the two files in /tmp (upt_%s.txt & upload_contents_%s by default). If you’ve been able to get this to work with PHP 5.2.5 Josh (or anyone else for that matter) I’d greatly appreciate your insight. In the meantime I’m back to my animated gif progress image
I am running PHP 5.2 on Ubuntu server. I have installed php5-dev. I also ran the following command: perl install HTML_Ajax-0.5.2 and perl install uploadprogress-0.3.0. I have modified php.ini to set the temp folder. I have the move command and the file is uploading fine. I have restarted apache2 BUT the progress bar is going back and forth. Also I am not seeing the file byte progress or percentage. Am I missing something?
Correction: I meant to say “pecl install uploadprogress-0.3.0″. All commands ran successfully without any errors.
another correction: perl install HTML_Ajax-0.5.2 should be pear install HTML_Ajax-0.5.2
Dinesh: make sure to get the latest progress bar code from svn and check your phpinfo screen tomake sure that the uploadprogress extension is getting loaded
Dear Joshua,
Need your help desperately again. I am trying to echo an error to the brower if the tmp bytes_total is more than 300MB. Usually PHP only sends an error message after the file has been uploaded to the tmp folder and before it is moved. I want the client to get an error before the file is uploaded. I heard from some other blog that this is possible with the new uploadprogress extension and hooks. If yes, how would I modify your code to make this work?
Thanks!
Dinesh
Dinesh: I haven’t heard of anything in the extension helping that, but there is a comment that the manual talks about that sets the max size limit in the browser where it should be enforced.
Joshua,
Will that work for all the browsers? Also where can I find this manual? I have been looking for it.
Thanks!
Dinesh
Dinesh: no clue about browser compat, but i think it does
http://www.php.net/manual/en/features.file-upload.php
from the manual -
The MAX_FILE_SIZE hidden field (measured in bytes) must precede the file input field, and its value is the maximum filesize accepted by PHP. Fooling this setting on the browser side is quite easy, so never rely on files with a greater size being blocked by this feature. The PHP settings for maximum-size, however, cannot be fooled. This form element should always be used as it saves users the trouble of waiting for a big file being transferred only to find that it was too big and the transfer failed.
Joshua,
Thank you! That seems to work but different browsers seems to come back with different error messages. For exampe: IE7 says Internet Explorer cannot display the web page. Firefox comes back with an error that reads The connection was reset. I guess I can use JavaScript to make the error more user friendly. The MAX_FILE_SIZE option i.e. maxFileSize in UploadProgressMeter.class.php is definitely a nice layer of security in addition to the maximum limits set in php.ini. Some JavaScript would be a nice finishing touch. I am working on that now. Thanks again!
Dinesh
Joshua,
Bummer! It looks like I need an ActiveX control or a perl script to grab the file size from the client side before the file is uploaded (on submit or on post). I read somewhere that PHP 6 might be able to get the file size prior to an upload. Any recommendations? Please help!
Thanks
Dinesh
Dear Joshua,
I have made progress. The bar does not jump to 100 percent for smaller files but when I try a 695 Megabyte ISP file it jumps immediately to 100 percent. My post and max sizes in php.ini and in the script is set for 300 MB, so I can see what this may be happening, but is there a way to make it stick to 0 percent and give the client an error message saying that the file is too large to upload? I dont see why this cannot be done because as soon as the upload progress bar starts, the stats clearly show a total byte count i.e. the variable $tmp['bytes_total'] from the UploadProgressMeterStatus.class.php script. This means that it is getting the total byte count of the file before it is uploaded to the temporary folder. How do I echo an error to the browser. I have tried differnt approaches but it does not seem to work. Please help! Thanks.
Dinesh You will need to update the javascript code to produce the error(have the PHP side add an error code to the returned information and check for it in UploadProgressMeter_Update)
I’m starting to work on an updated version of the script that has better error handling but i’m not sure when it will be done. Feel free to email me (josh@bluga.net) if your interested in sponsoring some improvements to the code or if you have some work you’ve already done that you want to add back to the public version.
Joshua,
I just increased the sleep time from 1 to 3 seconds and I changed if ($tmp['bytes_total'] < 1) to if ($tmp['bytes_total'] message within a div
What happened to the rest of my post? Was it too long?
The bar jumps to 100% for large files. I have tested it for a 104 MB file and it works fine, but when I tested it with a 499 MB file it immediately jumps to 100%. The problem seems to be the following section of the UploadProgressMeterStatus.class.php file: $tmp = uploadprogress_get_info($upId); What can I do to fix this behaviour?
Joshua,
Take a look at the following blog. It may explain why the bar is jumping to 100%.
The URL for the blog is http://pecl.php.net/bugs/bug.php?id=11505&edit=1
Dinesh:
That methods comes from the upload progress extension, one option would be to upload the code to use the apc tracking methods and see if that fixes the problem.
The other is too just detect the error and report an error message in that case.
I’ve not seen any cases where the tracking info isn’t getting written out so i would guess comment:
Some folks may be having issues if the upload_max_filesize ini variable
is smaller than the file they are attempting to upload. I found that if
the file I was attempting to upload was larger than the allowed size,
uploadprogress_get_info() would always return null.
is correct and fixes bigger then upload_max_filesize are causing problems.
Installing APC and enabling it to work along side the uploadprorgress extension seems to have broken the scripts even further. Now it jumps to 100% for every file, even small files. Futhermore, isin’t the overhead more when you use APC and uploadprogress at the same time? ….or are you recommending using one or the other….and not both at the same time? Error handling needs major improvement as the front end is designed for regular people and not programmers. Anyway, it’s back to the drawing board for me. Every little input and advice from you helps, so please keep it coming. Thanks again!
Dinesh:
You would use APC instead of the uploadprogress extension. I doubt having both loaded works at all.
Check out the rfc1867 section of http://us2.php.net/manual/en/apc.configuration.php
You will be replacing the uploadprogress_get_info() with a call like:
apc_fetch(“upload_$_POST[APC_UPLOAD_PROGRESS]“)
Joshua,
Ok, thank you. I will try the APC approach also. For now, what I did was increase the post and max file size settings in php.ini to 1G. I am letting the UIploadProgressMeterStatus.class.php file to do the error checking based on a 512MB max file size limit and I am sending an error code to the UploadProgressMeter.js file for issuing an alert to the browser. That seems to be working fine for me. I just want to know how to stop the progress bar and remove any temporary files or cache when it finds an error. I would GREATLY appreciate a solution for this. This would solve most of my problems. Thanks!
Joshua,
Basically along with my error checking I would like to halt or exit the script gracefully. Is that possible?
Dinesh:
I’m not sure what graceful options you have, the upload is happening in a different php process then the one checking status. So any upload cancellation is going to have to happen on the browser side, and I don’t know any way to cancel an in process form submission using javascript (which doesn’t mean its not possible, i’ve never really looked).
Joshua,
What if you simply redirect the client or browser back to the home page or main form as part of the error checking. That would break the upload in progress correct? It seems to be working for me. I am also using the JavaScript stop function but it only works with Mozilla and not IE. I think I answered my own question. Thanks.
Hello,
Where in all the code can I set the directory for which the uploaded file will go to? I can’t seem to find it anywhere, must be this head cold.
Clint:
You have to move the uploaded file at the end of the upload progress just like any other PHP upload script. There is a comment in the code showing you where to edit.
See the php manual for instructions on how to handle the file upload, none of the upload process is changed
Also you may want to check out the new version of this script, which has shows how to show the hidden iframe for debugging.
Joshua,
Is there a way to show the name of the file that is being uploaded (including for multiple file uploads)? For example: bytes_total shows the total bytes, I was wondering if there is anything for the real file name and temporary file name? I am looking to put this in the UploadProgresssMeterStatus.class.php file.
Joshua,
Ok, this is a 2 part question:
///////////////
1) Going back to post number 222 on this blog, please note that in your own script file i.e. UploadProgressMeterStatus.class.php you are returning the message Upload Complete when the uploadprogress_get_info() is returning null so how would I detect the error and return an error message to the client in this case? Maybe I am missing something. Basically how would I differentiate between somebody attempting to upload a file larger than the upload_max_filesize in php ini versus a completely legitimate file that has completed it’s upload?
//////////////
2) It appears that the post_max_size limit is 1.99G in the php.ini file. I am unable to make it work with anything larger than that value. I get an error as follows: Apr 24 20:37:04 web1 apache2: PHP Warning: Unknown: POST Content-Length of 44 bytes exceeds the limit of -2147483648 bytes in Unknown on line 0
//////////////
Is there really a 1.99GB limit? Is there a way to upload files larger than 1.99GB?
I’m sorry for asking tough questions and sorry if I am giving you a hard time, but I have searched for days looking for an answer and you are the only person that I can think of that may be able to answer these questions successfully.
//////////////
Thanks,
Dinesh
I’m not sure on #1, maybe a null after a good value is complete and a null before a good value is an error. You could track the status in the session.
For #2 its doubtful that files over 2gb work (at least on 32bit oses) normally you have to do special stuff to go larger and i doubt thats been a priority. If you want the details you should ask on a general php list.
Joshua,
////////
Re: #1: I am not sure I understand your response. I will need some more time to think about your response and research it. Re: #2: Would it be possible to bypass the 2 GB linux file limit for 32bit OS’es if I created a raw partition for the files?…or would the OS still impose that 2 GB limit on that partition? I know that this is off topic, but any help would be greatly appreciated. I read something about LFS support (large file system), but will that work for Apache/PHP also?
////////
From what I read on the php list, you are right, it is not a priority, but I wish it was.
////////
Thanks
Dinesh
Dinesh:
I belive the problem is that you can get a null response for 2 reasons. The upload is complete or it failed. I was just suggesting storing that you’ve started a good upload in the session to differentiate.
The 2gb limit shouldn’t be due to a OS limit on any modern system. But only apache 2.2 > support files over 2gb and I have no clue about the PHP upload processing code which is what really matter in this case.
Joshua,
///////////
This may sound like a simple or even stupid question, but how would I store or capture that a good session has started? How would I do the error handling for a failed session? I will eventually figure it out as I usually do, but I hope I dont have to waste any more time with this.
////////////
By the way, I am running Apache 2.2, ext3 filesystem, php 5.2 and the latest ubuntu server with updates, but I am still unable to pass the 1.99GB barrier.
///////////
apache2 -v says:
Server version: Apache/2.2.4 (Ubuntu)
///////////
php -v on command line says:
PHP 5.2.3-1ubuntu6.3 (cli) (built: Jan 10 2008 09:38:37)
///////////
PHP web environment says:
PHP Version 5.2.3-1ubuntu6.3
///////////
Will switching to a 64bit hardware and OS version be a guaranteed fix for this issue?
///////////
Dinesh
Hi all,
Why not using an upload applet to do all these stuff ? It would be simpler.
(How) Can I change the request method from async to sync?
WXP:
I’m not sure why you would want to make a sync request it locks the browser ui. But if you wanted to use the new version of this code and just update the call to use the sync version by removing the callback function.
You can use swfupload to upload your files. If uses flash but the integration with JSP, PHP is effortlessly and immediate. I tried on the site Kiqlo and it works great.
SWFUpload is NOT reliable solution. I have been struggling with too many problems (random firewall, browser setting, …) can stop your upload at any time with infamous error number #2038. Besides Flash 10 breaks compatability!
I’ve adapted Rasmus Lerndorf’s php file upload progress meter. As long as you have php5 and APC, everything should be very self-explanatory.
Click here to view the demo.
ê°œë©ì˜ ìƒê°…
Joshua Eichorn’s Blog » Blog Archive » AJAX File upload Progress…
Thats a nice script, but it took alot of work to fit my needs
Hi
Are you still supporting this??
If so please contact me..
Thanks
John