Home → Products → Aurigma image and file upload products → Image Uploader Pro → Tech Details → ASP.NET File Upload Solution: Quick Start

ASP.NET File Upload Solution: Quick Start

Introduction

If you build a website in ASP.NET file upload functionality can be easily added using Aurigma Image Uploader. Here's how:

  • Rich upload functionality. It can upload multiple files and folders at a single click, resize photos before upload, and much more. Learn more about features
  • Attractive appearance and intuitive user interface. Aurigma Image Uploader provides users with a convenient  and appealing user interface which enables you to select files or images and uploading them.
  • Works at any browser/platform. No matter whether a user comes from Microsoft Windows, Mac OS X or Linux and uses Internet Explorer, Safari, Firefox, Chrome or another browser, Aurigma Image Uploader displays an appropriate client control (ActiveX/Java) and guarantees that the user is able to send files from the browser.
  • You can easily insert Aurigma Image Uploader into an ASP.NET Web Form. Just drag and drop the control from the Visual Studio toolbox in the design mode. You can also configure the control through the Visual Studio Properties editor.
  • To integrate the control with your ASP.NET app, just write a few lines of code.

Getting Started with Aurigma Image Uploader ASP.NET Control

Let's run through an example of a simple ASP.NET file catalog, and demonstrate how Aurigma Image Uploader can help. Suppose the catalog requires a user to upload files of various types and display links to download these files. We can implement this task as follows.

Adding Control to an ASP.NET Page

To add Aurigma Image Uploader into a web page, just walk through the following steps:

  1. Create new ASP.NET web site (in Visual Studio 2008 menu File → New → Web Site...).
    ASP.NET file upload solution quick start, step 1: create new website dialog.
  2. Add Aurigma Image Uploader to the toolbox:
    1. Right-click on the tab of toolbox where you want to add this control and select Choose Items....
    2. Find the Uploader in the .NET Framework Components tab.
    3. If you cannot find this component, click Browse... and find the Aurigma.ImageUploader.dll assembly which is typically located at C:\Program Files\Aurigma\Image Uploader 7.0.11 - the version number may vary!
    4. Click OK on both Open and Choose Toolbox Items dialogs.
      ASP.NET file upload solution quick start, step 2: choose items dialog.
  3. Open the page where Aurigma Image Uploader should be placed in the design mode, then drag and drop the Uploader item into the desired position.
    ASP.NET file upload solution quick start, step 3: Aurigma Image Uploader ASP.NET control inserted into a page.

Configuring the Control

There are two ways to configure Aurigma Image Uploader. The first is to use the list of control properties in Properties editor. Each of these properties is coupled with a short description; however, if you need more detailed information see the reference documentation.

The second way is to modify control properties in the source of an ASP.NET page declaratively. See the source code of the main page of our catalog (Default.aspx) below.

<%@ 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 id="Head1" runat="server">
    <title>Simple File Catalog</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:Uploader ID="Uploader1" runat="server"
     height="300" width="580"
     OnFileUploaded="Uploader1_FileUploaded" >
     <UploadSettings RedirectUrl="Catalog.aspx" />
     <Converters>
        <cc1:Converter Mode="*.*=SourceFile"/>
     </Converters>
    </cc1:Uploader>
    <cc1:InstallationProgress runat="server" TargetControlID="Uploader1"
        ProgressCssClass="ScreenStyle"
        InstructionsCssClass="ScreenStyle" />
    </form>
</body>
</html>

In this example we have specified a few upload and appearance-related parameters. In particular, we have set the name of the server event handler that will receive uploaded files (Uploader1_FileUploaded) and a URL of the page where the user will be redirected to after the upload completes. On this page a list of files the user uploaded will be displayed.

If we did everything correctly, you will see the following page:

ASP.NET app with Aurigma Image Uploader.

Another set of settings in this example is the Converters. Converters define what files will be sent to the server for each user-selected file. Such files may be thumbnails, Zip file, icon, and source file itself. Our app is configured to upload only source files.

At last, it configures the installation progress appearance. Installation progress code is displayed instead of the uploader interface while Image Uploader is being initialized and installed on a client computer. In our example we set up this feature using the InstallationProgress class. Take into account that we have created a CSS style (ScreenStyle) for this screen and specified it in the InstallationProgress settings.

This is how the page should look like before Image Uploader is completely loaded.

An upload page before Aurigma Image Uploader is completely loaded.

Processing the Uploads

To process uploads made by the Image Uploader ASP.NET control, you need to write the FileUploaded event handler. This is how the default.aspx might look like:

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

    }
    protected void Uploader1_FileUploaded(object sender, Aurigma.ImageUploader.FileUploadedEventArgs e)
    {
        string catalogPath = Server.MapPath("Catalog/");
        Aurigma.ImageUploader.ConvertedFile sourceFile = e.UploadedFile.ConvertedFiles[0];
        sourceFile.SaveAs(System.IO.Path.Combine(catalogPath, sourceFile.Name));
    }
}
NoteMake sure that IIS has enough permissions to save files to the Catalog folder

Displaying Uploaded Files

The last thing remaining to complete our catalog app is to write some code that will display the files we upload. This is pretty simple — just take all files from the upload folder and add them to a page.

Catalog.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Catalog.aspx.cs" Inherits="Catalog" %>
<!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>Catalog</title>
</head>
<body>
    <asp:DataList ID="DataList1" Width="100%" RepeatLayout="Table" RepeatDirection="Vertical"
        RepeatColumns="1" runat="server">
        <HeaderTemplate></HeaderTemplate>
        <ItemTemplate>
            <a href="<%# catalogPath + System.IO.Path.GetFileName(Container.DataItem.ToString()) %>" target="_blank">
               <%# System.IO.Path.GetFileName(Container.DataItem.ToString()) %>
            </a>
        </ItemTemplate>
        <FooterTemplate></FooterTemplate>
    </asp:DataList>
</body>
</html>

Catalog.aspx.cs:

public partial class Catalog : System.Web.UI.Page
{
    protected string catalogPath;

    protected void Page_Load(object sender, EventArgs e)
    {
        catalogPath = "Catalog/";
        DataList1.DataSource = System.IO.Directory.GetFiles(Server.MapPath(catalogPath));
        DataList1.DataBind();
    }
}

That's all. Now we can open the Default.aspx page and try to upload some files there.

Uploading Images

Aurigma Image Uploader features special functionality for image uploads. In addition to browsing photos as thumbnails, it can resize photos before uploading them to a server. It saves your server resources and traffic by reducing the file size by tens of times. Learn more about resize before the upload

As an example, let's see how to modify Image Uploader settings to upload a 800x800 resized copy instead of the original image along with a 120x120 thumbnail.

    <cc1:Uploader ID="Uploader1" runat="server"
     height="400" width="600"
     OnFileUploaded="Uploader1_FileUploaded" >
     <UploadSettings RedirectUrl="Gallery.aspx" />
     <Converters>
        <cc1:Converter Mode="*.*=Thumbnail" ThumbnailFitMode="Fit" 
            ThumbnailHeight="120" ThumbnailWidth="120"/>
        <cc1:Converter Mode="*.*=Thumbnail" ThumbnailFitMode="Fit" 
            ThumbnailHeight="800" ThumbnailWidth="800"/>
     </Converters>
    </cc1:Uploader>

Now, let's modify a little bit the Uploader1_FileUploaded event handler to save thumbnails instead of the original file:

    protected void Uploader1_FileUploaded(object sender, Aurigma.ImageUploader.FileUploadedEventArgs e)
    {
        string galleryPath = Server.MapPath("Gallery/");
        string previewPath = galleryPath + "Thumbnails/";
        string sourceName = e.UploadedFile.SourceName;
        Aurigma.ImageUploader.ConvertedFile thumbnail1 = e.UploadedFile.ConvertedFiles[0];
        Aurigma.ImageUploader.ConvertedFile thumbnail2 = e.UploadedFile.ConvertedFiles[1];
        thumbnail1.SaveAs(System.IO.Path.Combine(previewPath, sourceName));
        thumbnail2.SaveAs(System.IO.Path.Combine(galleryPath, sourceName));
    }

This code saves the resized images to the Gallery folder and the thumbnails to the Thumbnails subfolder.

The last thing left to do is to transform the Catalog.aspx to Gallery.aspx which displays thumbnails instead of links, and that's all.

Gallery.aspx

<%@ 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>Gallery</title>
</head>
<body>
    <asp:DataList ID="DataList1" Width="100%" RepeatLayout="Table" RepeatDirection="Vertical"
        RepeatColumns="4" runat="server">
        <HeaderTemplate></HeaderTemplate>
        <ItemTemplate>
            <a href="<%# galleryPath + System.IO.Path.GetFileName(Container.DataItem.ToString()) %>" target="_blank">
                <img src="<%# thumbnailsPath + System.IO.Path.GetFileName(Container.DataItem.ToString()) %>" />
            </a>
        </ItemTemplate>
        <FooterTemplate></FooterTemplate>
    </asp:DataList>
</body>
</html>

Gallery.aspx.cs:

public partial class Gallery : System.Web.UI.Page
{
    protected string galleryPath;
    protected string thumbnailsPath;

    protected void Page_Load(object sender, System.EventArgs e)
    {
        galleryPath = "Gallery/";
        thumbnailsPath = galleryPath + "Thumbnails/";
        DataList1.DataSource = System.IO.Directory.GetFiles(Server.MapPath(thumbnailsPath));
        DataList1.DataBind();
    }
}

What Next?

This article demonstrates just a small subset of Aurigma Image Uploader features. If you are interested to learn more, visit Image Uploader documentation. You can also contact us directly with any questions.

Demo
Try
Buy

Forums

Documentation

Learn More

Documentation