Easy Way to Upload Images to the Web

Why Picture Uploads are so Important

Nowadays almost every website out there receives photos and other images. When you want to share last weekend's photos with your friends, you go to your social network account and post the pictures. If you want to sell your car, you submit the description and specs to a “used cars for sale” board. However, nobody would even care to call you without seeing a photo of the car online. So you take a camera and try hard to take some exterior and interior pictures from the best possible angles. Then you upload the pictures along with the ad message. This way, millions of digital pictures get uploaded and shared over the Web every day.

When uploading images, you would very much appreciate a convenient user interface. It would be nice to be able to navigate folders, select multiple images, and upload them with a single click. After that, it would be great to track upload progress and check how much time is left before upload completion.

A free evaluation version of the Aurigma Image Uploader can be downloaded from http://aurigma.com/Products/ImageUploader/FreeTrial.aspx.

Developing Imaging-enabled Sites

From the point of view of a web application developer, the situation is way more complicated. Here, we need a cross-browser upload solution with some image-specific functionality. Let us consider this in more detail.

As web developers, we all know what cross-browser support is and how much headache it brings. Creating a user interface that works in all browsers and platforms requires expertise and tons of testing.

Another important feature related to photo uploads is image processing. In most cases, the process of uploading photos does not complete right after the photos have been received by the server. Site logic can require the server side to apply additional processing on the received images.

For example, often it does not make sense to store full sized images server-side, if they are used for preview purposes only. Having thumbnails instead of full-scale pictures can save disk storage space and reduce outbound traffic generated by users who are browsing images on the website. Also, you might need to apply watermarks on all images stored on a site for copyright considerations.

It’s obvious that an image processing implementation requires certain expertise. You need to write additional code, debug and test it. Another point – image manipulation is a performance taxing operation requiring significant memory and CPU resources.

Client-side Imaging

A simple solution for all points listed above is to do all image-related operations client-side, before sending photos to the server. This way, you save not only server resources and outbound traffic but inbound traffic as well. For example, we have a 6 megapixel image compressed to JPEG. The file is about 1.5 MB. The web application does not store full-sized images and requires 800x800 pixels downsized copies. If we resize the image client-side before the upload, the size would be about 150 KB. We have just reduced the size of the file received by the server 10 times!

Aurigma Image Uploader

Aurigma Inc. provides a solution that does the uploads, and has additional functionality for preparing images before sending them – Aurigma Image Uploader.

From the technical point of view, the uploader is essentially a client ActiveX control and a Java applet that implement all the upload-related functionality. With the Aurigma Image Uploader, website users get an easy to use and sleek user interface for uploads. The upload pane enables users to pick images and files of any type and upload them with a single click. After a user clicks the Send button, the Aurigma Image Uploader applies preconfigured image transformations (if any), prepares a standard HTTP POST request, and sends it to a specified server page. This way, you do not need to create special server handlers, open additional ports, and so on. Your web server acts purely as the server side for the Aurigma Image Uploader.

The presence of both the ActiveX control and the Java applet ensures cross-browser and cross-platform support. No matter whether your client runs Microsoft Windows, Mac OS X, or Linux and uses Internet Explorer, Safari, Firefox, Google Chrome, or another browser. Aurigma Image Uploader instantiates the appropriate client control (the ActiveX control or the Java applet) and displays it on the web page.

At its core, the Aurigma Image Uploader is the ActiveX control, the Java applet, and the JavaScript framework that embeds them both to HTML. This way, the JavaScript framework configures the controls and handles client events in a consistent manner. Moreover, Aurigma Image Uploader ships with special wrappers for most popular server platforms: ASP.NET and PHP. They enable developers to utilize the Aurigma Image Uploader in a straight-forward way, just like another ASP.NET server control or PHP module. The ASP.NET control allows for embedding and configuring the upload control in Visual Studio in Design mode (WYSIWYG).

Now, let’s get down to coding. The remaining part of the article is devoted to a sample showing how to embed Aurigma Image Uploader into an ASP.NET page and configure it for sending downsized copies of images.

Implementing an Imaging-enabled Upload in ASP.NET

Suppose we develop a simple photo gallery that requires users to upload two downsized copies per each photo selected for upload: 120x120 pixels and 800x800 pixels. The first one will be used for browsing, another one – for large preview. To perform this task, we can break it up as follows:

1. Start Visual Studio 2008 and choose File -> New -> Web Site… from the menu. Select ASP.NET Web Site, and specify the language we are going to use. We will use C# in this sample.
2. Add a reference to the Aurigma Image Uploader ASP.NET control which can be found in the Aurigma Image Uploader installation package (Aurigma.ImageUploader.dll).
3. Open default.aspx in the editor. Add the Image Uploader ASP.NET control on the page.

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Aurigma.ImageUploader" 
             Namespace="Aurigma.ImageUploader" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Simple Photo Gallery</title>
    <style type="text/css">
        .ScreenStyle
        {
            background-color: #ffffff;
            font-family: verdana;
            font-size: 11px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ImageUploader ID="ImageUploader1" runat="server" Height="500" 
        Width="700" OnFileUploaded="ImageUploader1_FileUploaded"
        UploadThumbnail1FitMode="Fit" UploadThumbnail1Width="120" 
        UploadThumbnail1Height="120" UploadThumbnail2FitMode="Fit" 
        UploadThumbnail2Width="800" UploadThumbnail2Height="800"
        UploadSourceFile="false" RedirectUrl="Gallery.aspx">
       <InstallationProgress Visible="True" ProgressCssClass="ScreenStyle" 
                             InstructionsCssClass="ScreenStyle" />
    </cc1:ImageUploader>
    </form>
</body>
</html>

In our example, we configure Image Uploader to disable sending of non-resized (i.e. “source”) files, enable upload of two thumbnails (120x120 pixels and 800x800 pixels), specify a server event handler that will receive the uploaded files (ImageUploader1_FileUploaded), and point to a page where the users will be redirected after the upload completion. The redirect page will be our gallery displaying the uploaded files. Here is how our page with the Image Uploader (Java applet) looks like when opened in Firefox 3.5:



Also, we would like to highlight the installation progress feature. This feature allows for displaying a special information screen to users while Image Uploader is initializing and installing on a client computer. In our example, we set up this feature using the ImageUploader.InstallationProgress property. Note that we created a CSS style (ScreenStyle) for this screen and specified it in the InstallationProgress settings. The screen above shows InstallationProgress in Firefox while Image Uploader Java is initializing.



4. Here is the code-behind Default.aspx containing the handler method that gets all the files uploaded from a client (ImageUploader1_FileUploaded). This method is called once per each uploaded file. We get two thumbnails uploaded from the client for a particular file and save them to the corresponding folders on the server.

public partial class _Default : System.Web.UI.Page 
{
   protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void ImageUploader1_FileUploaded(object sender, 
                   Aurigma.ImageUploader.FileUploadEventArgs e)
    {
        string galleryPath = "Gallery/";
        string previewPath = galleryPath + "Thumbnails1/";
        string largePreviewPath = galleryPath + "Thumbnails2/";

        Aurigma.ImageUploader.ThumbnailInfo thumbnail1 = e.Thumbnails[1];
        Aurigma.ImageUploader.ThumbnailInfo thumbnail2 = e.Thumbnails[2];

        string safeFileName = 
          thumbnail1.GetSafeFileName(Server.MapPath(previewPath));

        thumbnail1.Save(Server.MapPath(previewPath + safeFileName));
        thumbnail2.Save(Server.MapPath(largePreviewPath + safeFileName));
    }
}

5. The last step will be our gallery displaying the uploaded files. The page and the code are quite simple.

<%@ Page Language="C#" AutoEventWireup="true" 
         CodeFile="Gallery.aspx.cs" Inherits="Gallery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Simple Photo Gallery</title>
</head>
<body>
    <asp:DataList ID="_dataList" Width="100%" RepeatLayout="Table" 
                  RepeatDirection="Vertical" RepeatColumns="4" runat="server">
        <HeaderTemplate>
            Simple Photo Gallery
        </HeaderTemplate>
        <ItemTemplate>
            <a href="<%# _largePreviewPath + 
                  System.IO.Path.GetFileName(Container.DataItem.ToString()) %>"
                target="_blank">
                <img src="<%# _previewPath + 
                  System.IO.Path.GetFileName(Container.DataItem.ToString()) %>" />
            </a>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:DataList>
</body>
</html>

The code:

public partial class Gallery : System.Web.UI.Page
{
    protected string _galleryPath = "Gallery/";
    protected string _previewPath;
    protected string _largePreviewPath;

    protected void Page_Load(object sender, System.EventArgs e)
    {
        _previewPath = _galleryPath + "Thumbnails1/";
        _largePreviewPath = _galleryPath + "Thumbnails2/";

        _dataList.DataSource = 
           System.IO.Directory.GetFiles(Server.MapPath(_previewPath));
        _dataList.DataBind();
    }
}

That’s it! Now we can open our gallery and upload a few photos.

Summary

This article sheds light on only a small set of features supported by the Aurigma Image Uploader. If you are interested in image upload, we recommend seeing the Image Uploader documentation at http://image-uploader-docs.aurigma.com/Docs/ImageUploader/Overview.htm. There you can access detailed information on the product.

A free evaluation version of the Aurigma Image Uploader can be downloaded from our site at http://aurigma.com/Products/ImageUploader/FreeTrial.aspx.