What is the best way to handle photo uploads?

StackOverflow https://stackoverflow.com/questions/74315

  •  09-06-2019
  •  | 
  •  

Question

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

Was it helpful?

Solution

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

OTHER TIPS

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.

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.

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

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

mesh@adobe.com

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.

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

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

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

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

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.

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.

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

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.

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.

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.

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.

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()  {
}
}

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top