What is the Best Image Uploader?
Tags: JavaScript, PHP | Written on 3/8/08
I desperately need and am looking for a solid way to upload and attach photos to my web applications. I have no problem coding uploading one at a time - that is simple - but what about uploading and managing multiple photos? SWFUpload has been my uploader of choice, but I have found it to be fairly shaky at times. Is there something better than SWFUpload, or is it the best?
Please keep in mind that I use PHP as my server-side technology, if that matters.
I'm giving away $10 via PayPal to the best answer.
Update: I'm looking for any method to upload images to web applications. This could be picasa, flickr, air application, normal forms with ajax ... whatever is easiest for people to get their pictures on web applications. Even though your ideas may not work for every case, I (and the community) need to hear your ideas and any methods used for uploading images.
Answers
Jack Herrington posted an interesting Image Uploader using Javascript and Adobe AIR. Not sure if this is what you're looking for, or if you're needing something to put into an online app. Check it out though.
Here's another pay-for-it image uploader. It's a java app that lets you browse your computer's files for pictures, and check a box above them to include them in the upload.
http://lukebrookhart.smugmug.com/
Email:
I can send an email with multiple attachments and have them go straight to flickr, the address is determined in flickr settings. This way when my family sends me photos, I can put them in my account. Or if I'm lazy I can even drag photos to mail.app and have them go to flickr quickly (tagged even with a common description and title).
Quicksilver:
This is handy for small batches. The plugin just uploads with tags the photos you select.
iPhoto/Aperture:
If you edit, organize a lot of photos there is a handy iPhoto plugin that lets you upload to flickr. You can also get one that lets you upload to Facebook. This method is what my wife does and I used to do for most of our photos just so we have a local permanent store, and then a web store and depending on the audience (everyone, or Facebook friends) we can send it to the right place.
Lastly...
Flickr Uploadr:
This works when the other methods don't or you're in a hurry. Not my favorite, but not bad either.
It's just dead simple, with absolutely no advanced features, and a simple interface.
The .php page you visit
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA-VJBOpbmLR1VpLodZvTGSRSeddXa10NOGNmRhwQzhD4X7meCxhQyf83CVz8wTw6yQ4w7yaQJa_r-XA"></script> <script type="text/javascript"> google.load("jquery", "1.2.6"); function gogo(){ $upform = $("form"); $upform.bind("submit", function(event){ $ifrm = $("<iframe name="up-" + (new Date()).getTime() + "" src="about:blank" />") .hide() .bind("load", function(event){ window.setTimeout(function(){ $bdy = $(window.frames[$ifrm.attr("name")].document.getElementsByTagName("body")[0]); resp = $bdy.html(); $ifrm.remove(); $img = $("<img src='" + resp + "' title='" + resp + "' />") $("body").css({cursor: "default"}); }, 500); }); $("body").append($ifrm); nm = $ifrm.attr("name"); $upform.attr({ action: 'upload.php', method: 'post', enctype: 'multipart/form-data', ecoding: 'multipart/form-data', target: $ifrm.attr("name") }); }); } </script> </head> <body onload='gogo()'> <form> <input type="file" name="file" size="60" /> <input type="submit" value="Upload Files" /> </form> </body> </html><?php if ((($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg") || ($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/bmp") || ($_FILES["file"]["type"] == "image/pjpeg"))) { if ($_FILES["file"]["error"] > 0) { echo "err - Return Code: " . $_FILES["file"]["error"] . ""; } else { if (file_exists("images/upload/" . $_FILES["file"]["name"])) { echo $_FILES["file"]["name"] . " already exists. "; } else { move_uploaded_file($_FILES["file"]["tmp_name"], "images/upload/" . $_FILES["file"]["name"]); echo("images/upload/" . $_FILES["file"]["name"]); } } } else { echo "err - Invalid file: " . $_FILES["file"]["type"]; } ?>Of course, you may not be uploading images, however it is quite simple to change around. I got the majority of the PHP from w3 schools (http://www.w3schools.com/PHP/php_file_upload.asp).
That's all asynchronous, tested only on FF3 and Opera 9.5 on Ubuntu 8.04 mind you. I literary just finished working with that.
If you are wondering why there is a window.setTimeout(), it is because it solves the FF3 constant loading problem that shows up in many methods, and it allows opera to receive the results of the php script before it continues on with the javascript.
Please do not post my email in any public location.
Try the demo link here
http://the-stickman.com/web-development/multiple-file-uploader-mootools-version/
the class can be found at
http://www.verot.net/php_class_upload.htm
alwasy works for me
http://digitarald.de/project/fancyupload/
If you'd like to see our server-side code, just drop me a line.
you propably already got this answer, but just in case:
FancyUpload (demo) by harald kirschner is a nice flash/javascript-based solution which has plenty of config-options, is easy to style via css, seems to be clean implemented in javascript and actionscript, is actively maintained...and after all it degrades gracefully!
the only problem could be the dependency on mootools. but you can still use jquery or whatever and just combine and gzip fancyUpload with mootools as a whole. this should not be too much overhead.
greetings from germany,
leo
recently i saw some web-apps which allowed to upload files via email. The customer sends an email with attachments to a personalized email-adress (adwhjkadh52hkj423k234hj@web-app.com or myusername@web-app.com or whatever). The email is then processed via a script (propably executed via cronjob). A confirmation email could be sent to the customer as well (e.g. "your files xyz.jpg, foobar.pdf have been processed an can be accesed via myusername.web-app.com/files-9823jkakjlwa/").
Advantages:
* Easy to use for not so tech-savvy users
* In fact, easy to use for kinda everyone (just forward an email with those attachments and wait a few minutes)
* The interface (email-client deskop- or web-based is already familiar to the customer)
* No technical requirements for the customer (e.g. flash, javascript, java...)
* some more...
Disadvantages:
* No realtime feedback (e.g. "those are invalid files"-email after the cronjob processed the files)
* Works great in some cases, but propably only suitable as an addition to a "real" web-based solution integrated in the application
Looking forward to hear about the answers which were submitted.
Regards, leo