<p>I'm doing a website for a family member's wedding. A feature they requested was a photo section where all the guests could go after the wedding and upload their snaps. I said this was a stellar idea and I went off to build it.</p>

<p>Well there's just the one problem: logistics. Upload speeds are slow and photos from modern cameras are huge (2-5+Megs). </p>

<p>I will only need ~800px wide images and some of them might require rotating so ideally I'm looking about using a client-side editor to do three things:</p>

<ol>
<li>Let users pick multiple files</li>
<li>Let them rotate some images so they're the right way up</li>
<li>Resize them and then upload</li>
</ol>

<p>And in my dream world, it'd be free and open source. Any ideas?</p>

<p>Just a reminder: this is something the guests have to use. Some of them will be pretty computer savvy but others will be almost completely illiterate. Installing desktop apps isn't really an option. And I assume 98% of them have Flash and Java installed.</p>

<p>Edit: I'd prefer a Flash/Java option over SilverLight, not least because it has a smaller install rate at the moment, but also because I'm on Linux and I'd like to test it =)</p>

[{'answer_id': 74330, 'author': 'swilliams', 'author_id': 736, 'author_profile': 'https://Stackoverflow.com/users/736', 'pm_score': 1, 'selected': False, 'text': '<p><a href="http://picasa.google.com/" rel="nofollow noreferrer">Picasa</a> is a pretty great/free photo management app. It let\'s you do some pretty impressive editing, and has upload capabilities, though I can\'t remember if it will upload to anywhere, or just certain popular sites (like Flickr).</p>\n'}, {'answer_id': 74337, 'author': 'justin.m.chase', 'author_id': 12958, 'author_profile': 'https://Stackoverflow.com/users/12958', 'pm_score': 1, 'selected': False, 'text': "<p>You could use Silverlight or Flash or some custom plugin to allow managed uploads, where you can display a progress bar for example. There isn't much you can do about upload speeds but you can at least show them progress while it's going on.</p>\n\n<p>I don't know of any canned upload programs you can use but it shouldn't be too hard to make one (unless you don't know Flash or Silverlight).</p>\n"}, {'answer_id': 74365, 'author': 'jeffrey', 'author_id': 12814, 'author_profile': 'https://Stackoverflow.com/users/12814', 'pm_score': -1, 'selected': False, 'text': '<p>GIMP (<a href="http://www.gimp.org/" rel="nofollow noreferrer">http://www.gimp.org/</a>) is a good tool for doing resize and is open source.</p>\n'}, {'answer_id': 74371, 'author': 'Kyle Renfro', 'author_id': 8187, 'author_profile': 'https://Stackoverflow.com/users/8187', 'pm_score': 2, 'selected': False, 'text': '<p>I have had good luck with <a href="http://gallery.menalto.com/" rel="nofollow noreferrer">Gallery</a>. It is free, open source, and has all the features you mentioned.</p>\n\n<p>It will allow your users to upload photos without any intervention from you.</p>\n'}, {'answer_id': 74379, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>How about using <a href="https://www.photoshop.com/express/landing.html" rel="nofollow noreferrer">PhotoShop Online</a> It allows you to edit photos with a web based editor and offers 2GB of storage. I\'ve not used it myself so don\'t know if it allows for multiple users to access the same account though</p>\n'}, {'answer_id': 74389, 'author': 'Grank', 'author_id': 12975, 'author_profile': 'https://Stackoverflow.com/users/12975', 'pm_score': 1, 'selected': False, 'text': '<p>Out of curiosity, on what web stack is this to run?  LAMP? 2k3+IIS? etc etc?  Many of the open source solutions out there are cross-platform but others are not...</p>\n'}, {'answer_id': 74390, 'author': 'zigdon', 'author_id': 4913, 'author_profile': 'https://Stackoverflow.com/users/4913', 'pm_score': 2, 'selected': False, 'text': "<p>Another option could be to allow people to upload their photos to whatever service they're used to using (flickr, google, smugmug, or any other), and just accept a username for that service, or a URL for the folder.  </p>\n\n<p>Then you can have your application grab a copy of those pictures to store locally with a consistent interface.</p>\n"}, {'answer_id': 74416, 'author': 'chakrit', 'author_id': 3055, 'author_profile': 'https://Stackoverflow.com/users/3055', 'pm_score': 1, 'selected': False, 'text': '<p>Is <strong>E-mailing the photo in</strong> an available option?</p>\n\n<p>Most people who want to share photos probably already know how to send photos in email. And most email clients has already solved the problems of file uploading.</p>\n\n<p>Just setup one gmail/whatevermail account and have your website poll the inbox.</p>\n\n<p>It\'s something like what <a href="http://twitpic.com/" rel="nofollow noreferrer">TwitPic</a> does for twitter but your requirements seem to be more simpler than that.</p>\n'}, {'answer_id': 74425, 'author': 'mikechambers', 'author_id': 10232, 'author_profile': 'https://Stackoverflow.com/users/10232', 'pm_score': 2, 'selected': False, 'text': '<p>If you are doing this with Flash and using Flickr, then I would check out the AS3 Flickr library:</p>\n\n<p><a href="http://code.google.com/p/as3flickrlib/" rel="nofollow noreferrer">http://code.google.com/p/as3flickrlib/</a></p>\n\n<p>which has support for uploading images.</p>\n\n<p>Upload requires authentication. The library also contains a Flex based control for handling this:</p>\n\n<p><a href="http://www.mikechambers.com/blog/2008/08/12/flex-based-flickr-api-authorization-control/" rel="nofollow noreferrer">http://www.mikechambers.com/blog/2008/08/12/flex-based-flickr-api-authorization-control/</a></p>\n\n<p>(the rest of the library is ActionScript 3 and can be used in Flex or Flash.</p>\n\n<p>Probably the easiest solution is to just have the images uploaded to Flickr, edited in Picnik (built into Flickr now), and then loaded onto the users site using either the Flickr RSS feeds or APIs:</p>\n\n<p><a href="http://www.flickr.com/help/picnik/" rel="nofollow noreferrer">http://www.flickr.com/help/picnik/</a></p>\n\n<p><a href="http://www.flickr.com/services/api/" rel="nofollow noreferrer">http://www.flickr.com/services/api/</a></p>\n\n<p>hope that helps...</p>\n\n<p>mike chambers</p>\n\n<p>mesh@adobe.com</p>\n'}, {'answer_id': 74463, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>Personally most users don\'t understand DPI and their images even trimmed down end up larger than the php.ini for most hosting companies allow.</p>\n\n<p>I\'m not sure how much control you want to give them or how you want the public side to behave.</p>\n\n<p>I\'d suggest using a dropbox FTP application such as <a href="http://etonica.com/dropbox/index.html" rel="nofollow noreferrer">http://etonica.com/dropbox/index.html</a> (tango dropbox)  It\'s free to your clients and you only have to pay for your version so you can set up the FTP information and secure it.</p>\n\n<p>I\'d have them download something link paint.net (which is FREE) have them edit the photos to the proper size and then just drag and drop them to this application.  it\'s easy and doesn\'t require php.ini to be modified.</p>\n\n<p>You could also use something like slideshowpro\'s director application.</p>\n'}, {'answer_id': 74572, 'author': 'Changos', 'author_id': 12808, 'author_profile': 'https://Stackoverflow.com/users/12808', 'pm_score': 1, 'selected': False, 'text': '<p>I completly agree with zigdon, allow different sites, but only pick up photos from the web.  I you still want to allow uploads, and put a cap on size.</p>\n\n<p>Now, if you want to throw yourself into something big, I would suggest putting a cap on size, and then using JQuery (or other library) to work with the images.</p>\n\n<p>Just my 2 cents</p>\n'}, {'answer_id': 74595, 'author': 'Changos', 'author_id': 12808, 'author_profile': 'https://Stackoverflow.com/users/12808', 'pm_score': 1, 'selected': False, 'text': '<p>You could also have them email the pictures to picasa.  Picasa web has a feature where you can send images to a "secret" email that will post them to a picasa account.  Set up a picasa account, distribute the "secret" email, and wait for all the pictures to show up.</p>\n'}, {'answer_id': 74729, 'author': 'ScArcher2', 'author_id': 1310, 'author_profile': 'https://Stackoverflow.com/users/1310', 'pm_score': 2, 'selected': False, 'text': '<p>I\'d use an applet. You could do the resizing of the pictures and rotating on the client side.</p>\n\n<p>It looks like <a href="http://sourceforge.net/projects/jupload/" rel="nofollow noreferrer">JUpload</a> may do this for you.</p>\n'}, {'answer_id': 74747, 'author': 'Sleep Deprivation Ninja', 'author_id': 13002, 'author_profile': 'https://Stackoverflow.com/users/13002', 'pm_score': 2, 'selected': False, 'text': '<p>I\'ve used swfupload quite a bit. It\'s pretty awesome: <a href="http://www.swfupload.org/" rel="nofollow noreferrer">http://www.swfupload.org/</a></p>\n'}, {'answer_id': 78595, 'author': 'Gaurav', 'author_id': 13492, 'author_profile': 'https://Stackoverflow.com/users/13492', 'pm_score': 1, 'selected': False, 'text': '<p>Going the Flickr route is easy and will work well.</p>\n\n<p>If you want to go more advanced, I\'d recommend <a href="http://snipshot.com/services/" rel="nofollow noreferrer">snipshot</a> or <a href="http://www.picnik.com/info/api" rel="nofollow noreferrer">picknik</a> (Flickr uses it). Both are free to use and have APIs to use.</p>\n'}, {'answer_id': 80200, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>Depends on the web server.  If you can use servlets, try this :</p>\n\n<pre><code>// UploadServlet.java : Proof of Concept - Mike Smith March 2006\n// Accept a file from the client, assume it is an image, rescale it and save it to disk for later display\nimport javax.servlet.http.*;\nimport javax.imageio.*;\nimport java.io.*;\nimport java.util.*;\nimport java.sql.*;\nimport org.apache.commons.fileupload.*;\nimport org.apache.commons.fileupload.disk.*;\nimport org.apache.commons.fileupload.servlet.*;\nimport java.awt.image.*;\nimport java.awt.*;\n\npublic class UploadServlet extends HttpServlet  {\n\npublic static void printHeader(PrintWriter pw)  {\n    pw.println("&lt;HEAD&gt;&lt;TITLE&gt;Upload Servlet&lt;/TITLE&gt;&lt;HEAD&gt;");\n    pw.println("&lt;BODY&gt;");\n}\n\npublic static void printTrailer(PrintWriter pw)  {\n    pw.println("&lt;img src=\\"../images/poweredby.png\\" align=left&gt;");\n    pw.println("&lt;img src=\\"../images/tomcat-power.gif\\" align=right&gt;");\n    pw.println("&lt;/BODY&gt;&lt;/HTML&gt;");\n}\n\n\npublic void init()  {  // Servlet init() : called when the servlet is LOADED (not when invoked)\n}\n\npublic void service(HttpServletRequest req, HttpServletResponse res)   throws IOException {\n    DiskFileItemFactory dfifact;\n    ServletFileUpload sfu; \n    java.util.List items;\n    Iterator it;\n    FileItem fi;\n    String field, filename, contype;\n    boolean inmem, ismulti;\n    long sz;\n    BufferedImage img;\n    int width, height, nwidth, nheight, pixels;\n    double scaling;\n    final int MAXPIXELS = 350 * 350;\n\n    res.setContentType("text/html");\n    PrintWriter pw = res.getWriter();\n    printHeader(pw);\n\n    ismulti = FileUpload.isMultipartContent(req);\n    if (ismulti)  {\n        pw.println("Great! Multipart detected");\n        dfifact = new DiskFileItemFactory(999999, new File("/tmp"));\n        sfu = new ServletFileUpload(dfifact);\n        try  {\n            items = sfu.parseRequest(req);\n        } catch (FileUploadException e)  {\n            pw.println("Failed to parse file, error [" + e  + "]");\n            printTrailer(pw);\n            pw.close();\n            return;\n        }\n        it = items.iterator();\n        while (it.hasNext())  {\n            fi = (FileItem) it.next();\n            if (fi.isFormField())  {\n                pw.println("Form field [" + fi.getFieldName() + "] value [" + fi.getString() + "]");\n            }\n            else  {  // Its an upload\n                field = fi.getFieldName();\n                filename = fi.getName();\n                contype = fi.getContentType();\n                inmem = fi.isInMemory();\n                sz = fi.getSize();\n                pw.println("Upload field=" + field + " file=" + filename + " content=" + contype + " inmem=" + inmem\n                    + " size=" + sz);\n               InputStream istream = fi.getInputStream();\n               img = ImageIO.read(istream);\n               nwidth = width = img.getWidth();\n               nheight = height = img.getHeight();\n               pixels = width * height;\n               if (pixels &gt; MAXPIXELS)  {\n                   scaling = Math.sqrt((double) MAXPIXELS / (double) pixels);\n                   nheight = (int) ((double) height * scaling);\n                   nwidth = (int) ((double) width * scaling);\n               }\n               BufferedImage output = new BufferedImage(nwidth, nheight, BufferedImage.TYPE_3BYTE_BGR);\n               Graphics2D g = output.createGraphics();\n               g.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);\n               g.drawImage(img, 0, 0, nwidth, nheight, null);\n               ImageIO.write(output, "jpeg", new File("/var/tomcat/webapps/pioneer/demo.jpg"));\n               istream.close(); \n            }\n        }\n    }\n    else\n        pw.println("Bugger! Multipart not detected");\n        printTrailer(pw);\n        pw.close();\n}\n\npublic void destroy()  {\n}\n}\n</code></pre>\n'}, {'answer_id': 130742, 'author': 'c.sokun', 'author_id': 15396, 'author_profile': 'https://Stackoverflow.com/users/15396', 'pm_score': 1, 'selected': False, 'text': '<p>I am currently required to implement the similar requirement as Oli.</p>\n\n<p>I believe Facebook.com use java applet of some sort, and it work pretty well but I am not sure if the applet available as OSS. I am going to look into JUpload suggested by ScArcher2.</p>\n\n<p>If you guy no of any other good applet please keep it coming.</p>\n'}, {'answer_id': 144686, 'author': 'Mauricio Scheffer', 'author_id': 21239, 'author_profile': 'https://Stackoverflow.com/users/21239', 'pm_score': 3, 'selected': True, 'text': '<p>The most common solution for this is a java applet, although most of them are not free. Examples:</p>\n\n<ul>\n<li><a href="http://www.jumploader.com/" rel="nofollow noreferrer">http://www.jumploader.com/</a></li>\n<li><a href="http://www.aurigma.com/Products/ImageUploader/OnlineDemo.aspx" rel="nofollow noreferrer">http://www.aurigma.com/Products/ImageUploader/OnlineDemo.aspx</a></li>\n<li><a href="http://www.javaatwork.com/java-upload-applet/details.html" rel="nofollow noreferrer">http://www.javaatwork.com/java-upload-applet/details.html</a></li>\n<li>JUpload, mentioned by ScArcher2</li>\n</ul>\n'}, {'answer_id': 144708, 'author': 'Karan', 'author_id': 11110, 'author_profile': 'https://Stackoverflow.com/users/11110', 'pm_score': 1, 'selected': False, 'text': '<p>I\'d <strong>highly</strong> suggest using <a href="http://thefilebrowser.com/" rel="nofollow noreferrer">FileBrowser</a> by Lussomo. It\'s as easy as \'drag and drop\' :D</p>\n\n<p>I\'ve used it for my game development team where we had a raw dump of over 200 concept art images, and we simply extracted FileBrowser to a PHP-enabled webserver and dumped the images in appropriate directories (1 per album), and ran the thumbnailing script. It handles cropping of the images, and optimizing their size for you. So much better than using something like Menalto Gallery where you have to upload them through an awkward upload interface.</p>\n'}, {'answer_id': 499604, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 1, 'selected': False, 'text': '<p>Try this out\n<a href="http://www.lunarvis.com/products/tinymcefilebrowserwithupload.php" rel="nofollow noreferrer">http://www.lunarvis.com/products/tinymcefilebrowserwithupload.php</a></p>\n'}]
['https://Stackoverflow.com/questions/74315', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/12870/']