Price: US$79.00

Pay securely at PayPal. On the confirmation page, click Continue to product download page to download this product immediately.

Having a PayPal account is optional; if you don't want to sign up, look for the link which says Don't have a PayPal account?

Ultimate Image Resizer

ASP.NET Sample

This sample shows a possible way that the Ultimate Image Resizer can be used from ASP.NET webpages. In this example, an upload box is provided. When an image is uploaded, a large image is created with a maximum size of 800x800 pixels with the original aspect ratio preserved, and a thumbnail is created with a size of exactly 150x150 pixels. The side or top of the image is cropped in order for non-square images to resize to 150x150 pixels without stretching the image (click here for more information on resize modes).

All the thumbnails of the uploaded images are displayed at the bottom of the page. Clicking on a thumbnail shows the large version of the image.

Please note that this is just one possible way of many to handle uploaded images. Other possibilities include saving the image in a database rather than file system (note: this can have serious performance implications and is generally not recommended), and saving the originally-uploaded file without resizing it and creating resized versions on demand. Rather than renaming the image, the original name may be saved (or a unique search-engine-optimised name could be generated using the Friendly URL Writer), and the name could be stored in a database, etc.

Uploading images

The HTML contains an ASP.NET FileUpload control and a button which when clicked calls the uploadButton_Click method. There is a label which shows error messages in the case where the uploaded file is not an image, or some other error occurs. 

<form runat="server">
    <div>
        <asp:Label ID="errorLabel" runat="server" Visible="False"
                   Font-Bold="True" ForeColor="Red" />

        <h2>Upload an image</h2>
        <asp:FileUpload ID="fileInput" runat="server" />
        <asp:Button ID="uploadButton" runat="server" Text="Upload"
                    onclick="uploadButton_Click" />
        
    </div>
</form>

When the uploadButton is pressed the uploadButton_Click method is executed. This creates two versions of the image by passing the FileContent property of the fileInput control to the Ultimate Image Resizer. The two images are named Large.jpg and Thumbnail.jpg and are placed in a randomly-named folder. If anything goes wrong while resizing, an error message is written to the errorLabel.

C#

protected void uploadButton_Click(object sender, EventArgs e)
{
    // make a new folder especially for this image
    DirectoryInfo imageDir = _uploadDir.CreateSubdirectory(Guid.NewGuid().ToString());
    try
    {
        using (ImageResizer resizer = new ImageResizer(fileInput.FileContent))
        {
            // Make sure any images which are sideways are turned the right way around
            resizer.RotateIfNeeded();
            
            // Save it to disk as a large JPG, in its own special directory
            resizer.Mode = ResizeMode.KeepOriginalRatio;
            resizer.Resize(800, 800);
            resizer.SaveToDisk(OutputImageFormat.Jpeg, Path.Combine(imageDir.FullName, "Large"));

            // Also save a thumbnail version
            resizer.Mode = ResizeMode.KeepOriginalRatioByCropping;
            resizer.Resize(150, 150);
            resizer.SaveToDisk(OutputImageFormat.Jpeg, Path.Combine(imageDir.FullName, "Thumbnail"));
        }
        errorLabel.Visible = false;
    }
    catch (Exception ex)
    {
        errorLabel.Visible = true;
        errorLabel.Text = "Could not upload image: " + ex.Message;
    }
    
    RenderImages();
}

VB

Protected Sub uploadButton_Click(sender As Object, e As EventArgs)
   ' make a new folder especially for this image
   Dim imageDir As DirectoryInfo = _uploadDir.CreateSubdirectory(Guid.NewGuid().ToString())
   Try
      Dim resizer As New ImageResizer(fileInput.FileContent)
      Try
         ' Make sure any images which are sideways are turned the right way around
         resizer.RotateIfNeeded()
         
         ' Save it to disk as a large JPG, in its own special directory
         resizer.Mode = ResizeMode.KeepOriginalRatio
         resizer.Resize(800, 800)
         resizer.SaveToDisk(OutputImageFormat.Jpeg, Path.Combine(imageDir.FullName, "Large"))
         
         ' Also save a thumbnail version
         resizer.Mode = ResizeMode.KeepOriginalRatioByCropping
         resizer.Resize(150, 150)
         resizer.SaveToDisk(OutputImageFormat.Jpeg, Path.Combine(imageDir.FullName, "Thumbnail"))
      Finally
         resizer.Dispose()
      End Try
      errorLabel.Visible = False
   Catch ex As Exception
      errorLabel.Visible = True
      errorLabel.Text = "Could not upload image: " + ex.Message
   End Try
   
   RenderImages()
End Sub
 

The Page_Load event

The method above references the _uploadDir field, which is a folder called "Uploads" within the website. The Page_Load method gets a reference to this directory and makes sure it exists, before making the call to render the images.

C#

private DirectoryInfo _uploadDir;

void Page_Load(object sender, EventArgs e)
{
    // The upload directory will contain all the uploaded images
    _uploadDir = new DirectoryInfo(Server.MapPath("~/Uploads"));
    if (!_uploadDir.Exists)
        throw new ApplicationException("Please create the following folder: " + _uploadDir.FullName);
    
    if (!IsPostBack)
    {
        RenderImages();
    }
}

VB

Private _uploadDir As DirectoryInfo

Sub Page_Load(sender As Object, e As EventArgs)
   ' The upload directory will contain all the uploaded images
   _uploadDir = New DirectoryInfo(Server.MapPath("~/Uploads"))
   If Not _uploadDir.Exists Then
      Throw New ApplicationException("Please create the following folder: " + _uploadDir.FullName)
   End If 
   If Not IsPostBack Then
      RenderImages()
   End If
End Sub
 

Displaying the images

The images in this example are displayed in an ASP.NET Repeater control. The repeater expects to have a list of strings bound to it, where each string is a relative URL pointing to a directory containing an uploaded image and its thumbnail. By following the convention that the large image is named "Large.jpg" and the thumbnail is named "Thumbnail.jpg", the URLs of the images are known. 

<asp:Repeater ID="imageRepeater" runat="server">
    <HeaderTemplate>
        <h2>Uploaded images</h2>
    </HeaderTemplate>
    <ItemTemplate>
        <a href='<%# Container.DataItem + "Large.jpg" %>'>
            <img src='<%# Container.DataItem + "Thumbnail.jpg" %>'
                 alt="Click for large image" style="border-width: 0px;" />
        </a>
    </ItemTemplate>
</asp:Repeater>

The relative URLs (which are referenced using the Repeater-supplied property Container.DataItem are bound to the repeater in the RenderImages method:

C#

private void RenderImages()
{
    // Bind an array of string objects to the image repeater.
    // Each string is the URL-path to an individual image's folder.
    // Example string: /Uploads/6F509836-ECD5-489d-A15E-9F89E34CF07E/
    List<string> imageFolderUrls = new List<string>();
    DirectoryInfo[] imageDirectories = _uploadDir.GetDirectories();
    foreach (DirectoryInfo imageDirectory in imageDirectories)
    {
        // Each uploaded file was saved in a sub-directory of the main image dir,
        // and was named "Large.jpg"
        if (File.Exists(Path.Combine(imageDirectory.FullName, "Large.jpg")))
        {
            string url = ResolveUrl("~/" + _uploadDir.Name + "/" + imageDirectory.Name + "/");
            imageFolderUrls.Add(url);
        }
    }
    
    if (imageFolderUrls.Count == 0)
    {
        imageRepeater.Visible = false;
    }
    else
    {
        imageRepeater.Visible = true;
        imageRepeater.DataSource = imageFolderUrls;
        imageRepeater.DataBind();
    }
}

VB

Private Sub RenderImages()
   ' Bind an array of string objects to the image repeater.
   ' Each string is the URL-path to an individual image's folder.
   ' Example string: /Uploads/6F509836-ECD5-489d-A15E-9F89E34CF07E/
   Dim imageFolderUrls as New List(Of String)

   Dim imageDirectories As DirectoryInfo() = _uploadDir.GetDirectories()
   Dim imageDirectory As DirectoryInfo
   For Each imageDirectory In  imageDirectories
      ' Each uploaded file was saved in a sub-directory of the main image dir,
      ' and was named "Large.jpg"
      If File.Exists(Path.Combine(imageDirectory.FullName, "Large.jpg")) Then
         Dim url As String = ResolveUrl(("~/" + _uploadDir.Name + "/" + imageDirectory.Name + "/"))
         imageFolderUrls.Add(url)
      End If
   Next imageDirectory
   
   If imageFolderUrls.Count = 0 Then
      imageRepeater.Visible = False
   Else
      imageRepeater.Visible = True
      imageRepeater.DataSource = imageFolderUrls
      imageRepeater.DataBind()
   End If
End Sub
 

Download Sample

To run this sample locally, download and add the sample file to a new or existing ASP.NET project, and then download and add a reference to the Ultimate Image Resizer. The sample writes to the local disk on the webserver, so the ASP.NET process must have permission to create folders and files.

Download Download ASP.NET C# Sample
Download Download ASP.NET VB.NET Sample