views:

1788

answers:

20

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.

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

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:

  1. Let users pick multiple files
  2. Let them rotate some images so they're the right way up
  3. Resize them and then upload

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

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.

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 =)

A: 

Picasa 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).

swilliams
Sorry I should have clarified. This is for the guests, not for me. Some of these people are computer illiterate =(
Oli
Oh, do you want this to run in the web page? For lack of a better word, as an Applet?
swilliams
Picasa only uploads to google's service, picasaweb. It's still useful for editing the photos, but you'd still want to have an uploader if you want it to go to an arbitrary site.
zigdon
Yes, an Applet of some sorts would be what I'm looking for. I've edited the main post a couple of times to outline that now.
Oli
Just say in big letters "embedded in the web page" :-p
swilliams
A: 

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.

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).

justin.m.chase
A: 

GIMP (http://www.gimp.org/) is a good tool for doing resize and is open source.

jeffrey
Really? Your suggestions for people that are "almost completely illiterate" is GIMP?
swilliams
+4  A: 

I have had good luck with Gallery. It is free, open source, and has all the features you mentioned.

It will allow your users to upload photos without any intervention from you.

Kyle Renfro
A: 

How about using PhotoShop Online 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

Katy
A: 

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...

Grank
+4  A: 

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.

Then you can have your application grab a copy of those pictures to store locally with a consistent interface.

zigdon
I think this is the sanest solution. Online photo-hosting sites already have tools to resize and rotate photos, so why reinvent the wheel? Flickr has lots of options for getting data via feeds: http://www.flickr.com/services/feeds/
Garrett Albright
A: 

Is E-mailing the photo in an available option?

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.

Just setup one gmail/whatevermail account and have your website poll the inbox.

It's something like what TwitPic does for twitter but your requirements seem to be more simpler than that.

chakrit
+2  A: 

If you are doing this with Flash and using Flickr, then I would check out the AS3 Flickr library:

http://code.google.com/p/as3flickrlib/

which has support for uploading images.

Upload requires authentication. The library also contains a Flex based control for handling this:

http://www.mikechambers.com/blog/2008/08/12/flex-based-flickr-api-authorization-control/

(the rest of the library is ActionScript 3 and can be used in Flex or Flash.

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:

http://www.flickr.com/help/picnik/

http://www.flickr.com/services/api/

hope that helps...

mike chambers

[email protected]

mikechambers
A: 

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.

I'm not sure how much control you want to give them or how you want the public side to behave.

I'd suggest using a dropbox FTP application such as http://etonica.com/dropbox/index.html (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.

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.

You could also use something like slideshowpro's director application.

A: 

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.

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.

Just my 2 cents

Changos
+1  A: 

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.

Changos
+1  A: 

I'd use an applet. You could do the resizing of the pictures and rotating on the client side.

It looks like JUpload may do this for you.

ScArcher2
+3  A: 

I've used swfupload quite a bit. It's pretty awesome: http://www.swfupload.org/

Sleep Deprivation Ninja
Oh thank god man, this is exactly what I was looking for on a project I'm right in the middle of. You're a savior!!! Thanks.
bryanpearson
A: 

Going the Flickr route is easy and will work well.

If you want to go more advanced, I'd recommend snipshot or picknik (Flickr uses it). Both are free to use and have APIs to use.

Gaurav
A: 

Depends on the web server. If you can use servlets, try this :

// UploadServlet.java : Proof of Concept - Mike Smith March 2006 // Accept a file from the client, assume it is an image, rescale it and save it to disk for later display import javax.servlet.http.; import javax.imageio.; import java.io.; import java.util.; import java.sql.; import org.apache.commons.fileupload.; import org.apache.commons.fileupload.disk.; import org.apache.commons.fileupload.servlet.; import java.awt.image.; import java.awt.;

public class UploadServlet extends HttpServlet {

public static void printHeader(PrintWriter pw)  {
    pw.println("<HEAD><TITLE>Upload Servlet</TITLE><HEAD>");
    pw.println("<BODY>");
}

public static void printTrailer(PrintWriter pw)  {
    pw.println("<img src=\"../images/poweredby.png\" align=left>");
    pw.println("<img src=\"../images/tomcat-power.gif\" align=right>");
    pw.println("</BODY></HTML>");
}


public void init()  {  // Servlet init() : called when the servlet is LOADED (not when invoked)
}

public void service(HttpServletRequest req, HttpServletResponse res)   throws IOException {
    DiskFileItemFactory dfifact;
    ServletFileUpload sfu; 
    java.util.List items;
    Iterator it;
    FileItem fi;
    String field, filename, contype;
    boolean inmem, ismulti;
    long sz;
    BufferedImage img;
    int width, height, nwidth, nheight, pixels;
    double scaling;
    final int MAXPIXELS = 350 * 350;

    res.setContentType("text/html");
    PrintWriter pw = res.getWriter();
    printHeader(pw);

    ismulti = FileUpload.isMultipartContent(req);
    if (ismulti)  {
        pw.println("Great! Multipart detected");
        dfifact = new DiskFileItemFactory(999999, new File("/tmp"));
        sfu = new ServletFileUpload(dfifact);
        try  {
            items = sfu.parseRequest(req);
        } catch (FileUploadException e)  {
            pw.println("Failed to parse file, error [" + e  + "]");
            printTrailer(pw);
            pw.close();
            return;
        }
        it = items.iterator();
        while (it.hasNext())  {
            fi = (FileItem) it.next();
            if (fi.isFormField())  {
                pw.println("Form field [" + fi.getFieldName() + "] value [" + fi.getString() + "]");
            }
            else  {  // Its an upload
                field = fi.getFieldName();
                filename = fi.getName();
                contype = fi.getContentType();
                inmem = fi.isInMemory();
                sz = fi.getSize();
                pw.println("Upload field=" + field + " file=" + filename + " content=" + contype + " inmem=" + inmem
                    + " size=" + sz);
               InputStream istream = fi.getInputStream();
               img = ImageIO.read(istream);
               nwidth = width = img.getWidth();
               nheight = height = img.getHeight();
               pixels = width * height;
               if (pixels > MAXPIXELS)  {
                   scaling = Math.sqrt((double) MAXPIXELS / (double) pixels);
                   nheight = (int) ((double) height * scaling);
                   nwidth = (int) ((double) width * scaling);
               }
               BufferedImage output = new BufferedImage(nwidth, nheight, BufferedImage.TYPE_3BYTE_BGR);
               Graphics2D g = output.createGraphics();
               g.setRenderingHint(RenderingHints.KEY_INTERPOLATION, RenderingHints.VALUE_INTERPOLATION_BILINEAR);
               g.drawImage(img, 0, 0, nwidth, nheight, null);
               ImageIO.write(output, "jpeg", new File("/var/tomcat/webapps/pioneer/demo.jpg"));
               istream.close(); 
            }
        }
    }
    else
        pw.println("Bugger! Multipart not detected");
        printTrailer(pw);
        pw.close();
}

public void destroy()  {
}

}

A: 

I am currently required to implement the similar requirement as Oli.

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.

If you guy no of any other good applet please keep it coming.

c.sokun
+2  A: 

The most common solution for this is a java applet, although most of them are not free. Examples:

Mauricio Scheffer
I *wish* JumpLoader worked on Linux. There's a bug (that I've now reported) with it not loading on IcedTea/OpenJDK.
Oli
Well I emailed the JumpLoader creator yesterday, got in a quick MSN message exchange today, and a few minutes later, there was an OpenJDK-compatible version. MAGIC!! JumpLoader is miles better than lots of $50+ solutions and free (with pretty loose restrictions).
Oli
I use JumpLoader too, it's a great product. Support is great too, not only do they answer very fast, they fix bugs in a matter of minutes.
Mauricio Scheffer
A: 

I'd highly suggest using FileBrowser by Lussomo. It's as easy as 'drag and drop' :D

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.

Karan