An Ajax file upload progressbar
Posted on 27/4/06 by Felix Geisendörfer
Deprecated post
The authors of this post have marked it as deprecated. This means the information displayed is most likely outdated, inaccurate, boring or a combination of all three.
Policy: We never delete deprecated posts, but they are not listed in our categories or show up in the search anymore.
Comments: You can continue to leave comments on this post, but please consult Google or our search first if you want to get an answer ; ).
Important Warning: The code presented her was an experiment of mine that I did over a year ago. In the meantime flash based file uploaders have become a much better weapon of choice when it comes to unobtrusive upload experience enhancing. As of now I highly recommend you to checkout either jqUploader or SWFUpload as I am no longer able to provide support for this solution. Setting them up should be multiple times easier and will require no Perl or (Cake)PHP on the server side. HTH, Felix.
It's been quite a while since my last post, but believe me I've been working hard for this one. This time I'll present a solution of mine that allows you to have a progress bar for file uploads via ajax (and, unfortunatly a perl script). Now, since this is quite heavy on server load I mostly created it for usage in backends and I think thats where most ajax should belong anyway. But of course, you can use it for whatever you want to.
At this point I need to credit the people who created the Uber Uploader project from where I've taken the perl script for this.
My solution consists out of a bunch of JS, a CakePHP component and the modified Perl script from Uber Uploader.
The Code, Documentation and a Live Demo and can be found here.
-- Felix Geisendörfer aka the_undefined
Did you like this blog post? If so, please consider subscribing to the Blog RSS feed.
You can skip to the end and add a comment.
[...] Felix Geisendörfer has announced an Ajax file upload progress bar which integrates with CakePHP. The solution looks very promising, but check it out yourself, there is a demo online. [...]
Hey Daniel/dhofstet,
thx for your comment. You are right about the link problem, forgot to change it when changing my paths. Well but this brings me to mention another problem, when the page with the missing controller error is beeing rendered, all links in the menu seem to use a wrong base_path, making everything broken. I'll update the site to the latest nightly when I get time and will check if the issue has already been resolved. Otherwise it might be something to put on Trac.
Great code!
It's strange but if i try to upload with files ( 100mb ) with linux firefox or mac os x firefox , all right! With Windows often upload was broken showing this message:"Error: progressTracker not available"
Lorenzo: Are you talking about your own server? Or about the demo I've got online? Because the one online shouldn't accept files that big.
Hi Felix,
I'am talking about both (my server and your). It's very strange!
I've tried *at work* and *at home*. Same result: linux and mac can upload without problems ... with windows not !
Hm, Lorenzo, that sounds strange indeed. Is it only with files in the range of a hundred mb or with smaller files as well? I didn't have problems like this before.
The "Error: progressTracker not available" will appear when the AJAX request for retrieving the status failed. I could imagine a badly configured firewall to do stuff like this, but that's just a guess. Is the Windows configuration at home and at work the same?
--Felix
No, configuration are different.( But the router is the same) I'am not idea what can be. And i don't think is the firewall ( mac and linux client function great! ) I tried also original Uber php scripts: with mac and linux all goes done, with windows upload broken around 70-80 mb.
I disable antivirus and firewall ... same result :(
I'am looking for check WHAT the problem!
I'm doing other test .... i will post you result :)
Hey Lorenzo, well I've not tried files that big and since I'm on a 64 kbit connection (...) I'll not be able to do so at any point soon. But if you find a reason for the problems you have I'll be glad to publish a patch for it ; ).
bye, Felix
[...] read more | digg story [...]
Works great in Firefox. But not so much in Safari. In safari, a new page opens with this output:
Upload Complete
Array
(
[upload_range] => 1
)
Hey Will,
Safari is not supported (as the text above the demo upload form indicates) so far. But that's really only because I can't test and fix it there. I don't think any of the techniques used should be problematic with Safari in general.
Does not work in Safari. Useless, because you can not build a website that does not for the majority of mac users.
Hey Franz, I live in Germany, a country with propably less then 0.5% of Mac Users, theoretically I could care less about them. But the truth is just that I've got no Mac to test the JS on (and don't plan to get one either), so if you want to work with it, go and fix it yourself.
And if you'd actually have read the article above then you would know that this is intended for Administrator panels. When I build those I tell the client to use IE/FF or even Opera. If the client is unhappy with that he has to pay for having his exotic browser supported. *sigh* ... But oh well thanks for your comment anyway.
Ok, same thing now but for Download
Sorry mate, but perl (or any non-php) = dealbreaker.
Doesn't work on Safari. Not useful.
[...] Ever wondered if it was possible to display the upload status to a user while he is uploading a file to your website? It is! Check out this PHP implementation on thinkingphp.org.read more | digg story [...]
I'm sorry but I'll have to stand up for Felix on this.
This *is* useful for most admins. It's gonna be written into the next version of my CMS because none of my clients use Safari.
Furthermore I realize that this is freeware and open for developement. I recognize quality scripting when I see it and know when I'm beat. This is far better than anything I could have come up with and so I'll simply develop it.
My loose change anyway,
Tom
[...] ThinkingPHP: An Ajax file upload progressbar [...]
Cool man!
thanks for this one!
[...] An Ajax file upload progressbar [...]
The demo you've put up works nicely on my Windows and I'm sure the Safari problems are fixable. Aren't Mac-users the kind of people who fix open-source software to work on their machine as well, instead of complaining about it?
ps: I'm sure that the Perl cgi can be refactored to PHP. Now if I only had time...
Hey, Bas van Gaalen. I agree with you, this is OS, if something doesn't work you should contribute instead of to complain ; ).
Anyway, I wouldn't know how to refactor the Perl script into php. The problem is that you don't get access to the POST data before the upload is completed in php. That's something only perl can do. Well, there is a PHP hack to make this possible as well, but something that only works on dedicated hosts is less appealing to me then the perl compromise. The other idea would be to watch the temporary upload folder for php, but then you've got the problem that you don't know which file is the one the user is uploading? Is it the latest one, or are two users uploading at the same time? Hard to know. That makes this method unreliable as well ... Therefor the perl script is the only solution I'm seeing right now : /.
bye, Felix
Thanks for this one. One thing I had a problem with was uploading a load of pictures and then sticking names into a db in same order as entered. Found solution that seems to work to stop files being written to params file in seemingly random order - in uber_uploader.cgi around line 220
replace "foreach $file_name (keys %uploaded_files){ . .. " with "foreach $file_name (sort keys %uploaded_files){ .."
also using $this->Image->create()
doesnt seem to work with the cake core files in the demo. Using 1.0.0.2482 stops problem but brings up error Notice: Undefined variable: uninflectedSingluar in /var/www/html/cake-timer/cake/libs/inflector.php on line 251
is this just me doing something dumb?
Hi silang, I'm happy to see your trying to use CakeTimer ; ). Ok regarding the fileupload order: I have no idea how this is done, this is part of the uber_uploader project and I just modified the .cgi file to fit my needs. However, I think your other problem is not directly related to CakeTimer. Either something went wrong when you updated the core, or you have a problem in your code. But as always: you never know until it's fixed ; ).
Regarding CakeTimer in general. I'll soon start rewriting the entire thing, trying to make the entire thing easier to set up, as well as to improve the code itself. I'll also use Prototype instead of the Yahoo! UI Library for the next version since most people are already using it, and I just used Yahoo! because I wanted to learn more about it, which I did by now ; ).
Thanks for your Interest,
--Felix
No Safari No Good for Me - damn, I would have used this in the SUN infrasructure code!
So, check out SibSoft XUpload to get latest version of real upload progress bar.
Alex Z:
Well, thanks for this information but XUpload is a commercial project (at least the ajax version is) , so it's of no interest for me.
Som Sun Guy:
I'm sry, I hear a lot of people complaining about this issue, but no one has offered me to help debugging for safari. I really think there are just some minor JS issues, but since I'm not into Apple computers I cannot test it myself.
For All:
I'm currently writing a completly new version of this progress bar, using an own (and better) perl script so the entire project can become MIT licensed. I'll also use Prototype instead of the Yahoo! library, and add a couple new features.
Stay tuned.
How can we write the programm in php for the progressbar with time and upload file size.
reza ahmad: Afaik, this is not possible due to the fact that you won't be able to access post data before it's completly uploaded to the server in php.
hello...
i've been trying for a while now on my own remake of the uber uploader as well. except... all i need it to do is to tell me the progress of an upload that i've already got a form for in php. i don't need it to actually upload the files, make the temp directory, or rename the files or anything like that. just accept a few variables from me about the file and tell me it's upload progress.
can you point me in a good direction or help me develop this? i can probably pay you for your time. thanks...
Btw, the guy who developed UberUploader were using some code from XUpload. We also have free version of xupload.
Alex Z: I understand that this comment is related to the post and therefor I do not consider it as spam. However, this is no site to promote commercial software, and you already did that in your previous comments. So, please stop it or I'll filter xupload / sibsoft.net from my blog in future. Thanks. --Felix
Just to set the record straight. When I needed a upload progress bar I downloaded MegaUpload but I found it lacking. I also downloaded Xupload but also found it lacking because it used the same upload mechanism as MegaUpload. In other words it bypassed cgi.pm and tried to handle the upload itself. The one thing I did like about Xupload was that the progress bar did not refresh. So I re-wrote everything and used the Xupload progress bar idea. When I was finished I offered the code to the authors of both projects but they were not interested. So, I started my own project called Uber-Uploader and mentioned both authors as contributors in my source code. Several weeks later my upload mechanism appeared in the Xupload project and to date it does not mention my name in the source code as a contributor. Also, I occasionally point my users to Xupload as an alternative to my my script and have posted code in Xuploads help forum. I do not care that Xupload uses my upload mechanism because it is open source software. What really bothers me though is,
a. I am not credited for the upload mechanism in the Xupload source code.
b. The author of Xupload keeps posting in forums that I ripped off his code.
The funny thing is, if someone were to download both projects and compare the code you would see they are nothing alike. Accept for the upload mechanism as I changed my progress code a while back. Sorry for the rant but I do not appriciate someone insinuating that I ripped off code from them that I actually provided and they are charging money for it.
Just a follow up. The upload mechanism actually appeared two months later.
Xupload version 1.4 used the MU upload mechanism and it was released 2005-05-05
Xupload version 2.0 used UU upload mechanism and it was released 2005-12-07
Uber-Uploader version 1.0 was released 2005-10-07
Uber-Uploader version 1.0 is not active but I can re-activate it if anyone cares to have a look.
Again, sorry for the rant.
Hey Peter,
hm I'm sorry for what happened there and I agree that something like this is not ok. I'm in big favor of Open Source but even more in favor of Free Software, which is the reason why I license all things I create and publish under the MIT license at the moment.
So if somebody comes and takes my code and makes it commercial, no problem. If he doesn't mention my name in the product - works for me too. But if that guy would say that I stole his source when he was actually using mine - that's definitly not funny.
Together with the posts from Alex Z, weather or not he's a member of the project, and your comment, I've gotten a very negative picture of this project so far and I'd recommend their project manager to overthink their strategy, and potential users to look for other choices then Xupload.
For that reason I wish good luck to you peter and hope stuff like this won't happen to you again.
Hi Felix,
Thanks for the feedback. I'm not saying you should not use Xupload as I still believe it is a well written upload script and I will continue to recommend it along with MegaUpload as a good alternative to Uber-Uploader. I have often stated publicly that MegaUpload and Xupload inspired Uber-Uploader and if it were not for these two projects, UberUploader would not even exist. However, I depend on developing software to make a living so it is not good for my reputation if someone states in a public forum that I ripped thier code and claimed it as my own. I would not even care if it was claimed in private, but a potential employer could easily google this and come to the wrong conclusion. Sorry, but I was forced to play my hand.
I'd like to give this a try but the link to the files and docs is broken. Is there an alternate area to download the files?
Hey Rodney, I don't know if there was a temporary problem when you checked, but right now, everything seems to work nicely.
Try: http://thinkingphp.org/demos/cake-timer/ (don't forget the trailing slash!)
[...] AUTOMATOR.USThe Computer Bed - Euro FlyingBedMac Mini Intel Core Duo Upgrade GuideLinuxAdvocate.org - Linux information, advocacy, reviews and tips for everyone.LILEKS (James) the EngraveyardLinux versus Mac OS X on Intel Dual CoreWired 14.05: The RFID Hacking UndergroundBBC NEWS | Programmes | Click | Hacker fears ‘UFO cover-up’LinuxAdvocate.org - Linux information, advocacy, reviews and tips for everyone.CakeTimer - Demo Page | An Ajax file uploads progress barThinkingPHP » An Ajax file upload progressbar [...]
Hello everyone,
noone telling that Peter "ripped" or "stolen" sources of Xupload. A long time ago, when Xupload was completely free open source project, we had some communication with Peter and he used some ideas in his code, as well as we used some of his ideas. Again, that was just ideas/features using, but not source code copy-pasting or something like that (we're talking about open source versions). We respect intellectual property rights and not going to complain on somebody. If Peter have any complains on Xupload authors, he can contact us and we will resolve issue, if any. If we somehow hurt Peter, then we ready to present our apologies. As for Felix, who's "taking negative picture" and advising to stay away from xupload, we recommend to gain an understanding of full situation first and only then start making such statements. But sorry for double posting about Xupload. Anyway, if somebody have any questions - you're welcome to email. Thanks for attention.
Alright, Alex Z, Peter, and who ever else is listening:
I guess in future I'll try to avoid getting involved in 3rd party conflicts over intellectual property. It is impossible for me to figure out who did what and who didn't.
However, I did feel that Alex Z tried to catch some of the digg traffic this article recieved by pointing people to their product (xupload). And I just don't like my blog being used for commercial advertisment. If users of a commercial product point it out because they like it, ok. But the next time a vendor will post on here for other reasons than correcting mistakes or contributing to the discussion, I'll delete such comments.
So based on the comments in here I was naturally in favour of peters point, but as I said: I really don't know who is right. And I'd like the discussion about it here to stop at this point.
If somebody reads this who is looking for an ajax upload progress bar, go ahead and make up your mind about xupload and all the other products yourself. Feel free to post suggestions on here, but please not accuses etc. anymore.
Regarding the CakeTimer itself: The setup proofed to be somewhat difficult and a lot of people struggled with integrating it. I had a client who needed it and I was in the progress of refactoring the code and to write my own perl script, but he canceld the request, so I didn't go with it any further. Anyway, if you need something to integrate an ajax upload bar into your site, you can drop me a note at http://www.fg-webdesign.de/en/ and I'll see what I can do, depending on how busy I am. I definitly have no time to support this in my spare time right now.
The Uber uploader had a great idea. I have my own implementation of an AJAX file upload script based on the same idea (credits are in the source code) - but I tototally rewrote the JavaScript. The result is with proper compression the script size is less than 5K! You can take a look at it at: http://www.seemysites.net/projFolder/uploader
When somebody has JS disabled your upload form get's broken. Try to use unobstrusive JS if possible.
[...] You’ve probably all followed my latest post that was purely written to make it to the digg.com home, which it did. However, the resulting traffic I got was not as overwelming as I had hoped, and even less then I had my with the first article of mine which made it to digg.com’s homepage. The stats are still going up a little bit, but I think it’ll come down to about 3000 visitors, which is pretty low knowing that last time I had 8000 and expected around 15k this time. Maybe I had a bad timing, used a little too much buzz language, or the article wasn’t just that good. But I think it’s fairly safe to say that only the news with the most catchy headlines and descriptions got a chance in the game today. Seems like the web isn’t too different from traditional media in that respect after all. As far as ad revenue goes, the total will probably range between $20-30, and whatever it ends up being, 100% instead of the original 75% of it will go to the foundation. It’s not a lot, but I hope it’ll be appriciated anyway. [...]
Hi ^^
Great Job ... but i have somes problem with cake timer.
Uber Uploader works on my server but cake timer don't work.
I try to upload a file and i have a error message 'Error: progressTracker timeout: max is 15 seconds'
Hi Felix, I also have the following error:
progressTracker timeout: max is 15 seconds
Any idea as to what would cause this? I have tried the obvious like folder permissions and paths but with no joy.
PS Dont let people get you down; you have provided a great piece of functionality to the cakephp community. :o)
Hi,
The example works but ...
When i try cake timer with the last version of cake (cake_1.1.12.4205), i have somes errors :
Error: progressTracker Data has a wrong format!
Notice: session_start(): ps_files_cleanup_dir: opendir(/var/lib/php4) failed: Permission denied (13) in /var/www/virtual/**********/htdocs/up/cake/libs/session.php on line 146
Warning: Cannot modify header information - headers already sent by (output started at /var/www/virtual/**********/htdocs/up/cake/libs/session.php:146) in /var/www/virtual/**********/htdocs/up/cake/libs/session.php on line 147
Warning: Cannot modify header information - headers already sent by (output started at /var/www/virtual/**********/htdocs/up/cake/libs/session.php:146) in /var/www/virtual/**********/htdocs/up/app/controllers/components/cake_timer.php on line 88
Warning: Cannot modify header information - headers already sent by (output started at /var/www/virtual/**********/htdocs/up/cake/libs/session.php:146) in /var/www/virtual/**********/htdocs/up/app/controllers/components/cake_timer.php on line 89
Warning: Cannot modify header information - headers already sent by (output started at /var/www/virtual/**********/htdocs/up/cake/libs/session.php:146) in /var/www/virtual/**********/htdocs/up/app/controllers/components/cake_timer.php on line 90
Warning: Cannot modify header information - headers already sent by (output started at /var/www/virtual/**********/htdocs/up/cake/libs/session.php:146) in /var/www/virtual/**********/htdocs/up/app/controllers/components/cake_timer.php on line 91
Warning: Cannot modify header information - headers already sent by (output started at /var/www/virtual/**********/htdocs/up/cake/libs/session.php:146) in /var/www/virtual/**********/htdocs/up/app/controllers/components/cake_timer.php on line 92
I want to stores the html-form file values into the session variable in php file and after the 4 pages access one by one. (like shopping cart - if successful payment then upload image) i upload this image file but it gives a error : no such file ,
so i confused here.
session values are destroued after some time ?
Please give me the proper solution of it.
----------Help-------
Bhaumik: Is this a CakePHP question? If so please try the google group or #cakephp alongside with further information. Otherwise I can't really help : /.
doesn't seem to work for me
yebo: Did you read the red text that says 'Important' on top of this post : )?
It works. Thank you !
[...] An Ajax file upload progressbar [...]
code link is broken, please check an fix
hi Felix,
code link broken. it's not working with a trailing slash or not. Please have a check.
Sorry folks, had to take the upload demo down - people were spamming it like crazy. Please see the "Important Warning" section on top of the page.
So is there any way to get your script? I'm really interested!
As for flash uploaders: I don't know ... they're not ... cool ... :-D
Ok let me phrase that very clearly. The code sucked. I regret having written it. I would have nightmares if people were using it for anything but compiling a list of bad ideas.
Sorry folks, but it was fun to play with it at the time, but I never got it really reliably nor do I think that even if it was it would be a good solution due to the difficulties in setting it up and the amount of unnecessary communication involved.
Jens: Check out SWFUpload, it is essentially making the stability of flash available to you via a JS API. That means your UI is completely JS and flash is just used for reporting back on progress of of the upload. Its my method of choice these days.
thx for links i was looking for some kind scripts to AJAX upload
Actually i think this script and uber-upload have a lot of merit still in them.
I have clients that want to upload large files to there server but are scared of ftp and want it browser base which allows adding into a database.
As you know some hosts limit the size of posts to say 2mb which can be useless for certain files.
The perl script by passes that allowing for larger file uploads which is great.
I would recommend it for backend work. When in a secure area needing sessions and cookies to check login and auth's flash can be a nightmare to get working as it logs you out all the time.
Just my thoughts i'm loving uber-uploader and would of loved to have seen what you have done.
I have problem in file uploaod in ajax in cakephp?
i am unable to get $_FILES values or $this->data values of file like name,type, error, size
im trying dthe uber uploader
Its not shown .
The link "check out the documentation" on the demo page is broken.
juanpablostange.blogspot.com/2009/07/upload-progress-bar-100-php.html
Hope its usefull for somebody
Great Blog! Thanks!
This post is too old. We do not allow comments here anymore in order to fight spam. If you have real feedback or questions for the post, please contact us.
Good work!
The link "check out the documentation" on the demo page is broken.