Uploading images & storing them dynamically after resizing is a painless affair now using .NET, unlike what it used to be in Classic ASP. There are several good articles on uploading & resizing images on CodeProject (.NET Image Uploading [^], File Upload with ASP.NET [^], Thumbnail Image Creation and Image format Conversion Utility [^]) & elsewhere on the net (True Image Resizing [^]). One issue with resizing images is that the quality of the image deteriorates. This article is written in praise of the PNG image format & shows how the original quality of the uploaded image of any regular format can be maintained & even be improved.
PNG - What's it?
Check out this excellent article on the PNG image format - FAQ: Converting GIF or JPG to PNG [^]. To paraphrase the article -
- PNG stands for Portable Network Graphics and pronounced "ping".
- PNG is supported by the major browsers (Microsoft IE and Netscape 4.x and higher)
- The images are a lot clearer, no more grainy GIF images or pixelated JPGs!
This application allows the user to set the dimensions for the image to be resized & uploaded. The resized image is converted into the W3C Portable Network Graphics (PNG) image format by using the
PNG property of the
<%@ Page Language="C#" %>
<%@ import Namespace="System.Drawing.Imaging" %>
void UploadBtn_Click(Object sender, EventArgs e)
String UploadedFile = MyFile.PostedFile.FileName;
int ExtractPos = UploadedFile.LastIndexOf("\\") + 1;
//to retrieve only Filename from the complete path
String UploadedFileName = UploadedFile.Substring(ExtractPos,UploadedFile.Length - ExtractPos);
// Display information about posted file. Div is invisible by default
FileName.InnerHtml = UploadedFileName;
MyContentType.InnerHtml = MyFile.PostedFile.ContentType;
ContentLength.InnerHtml = MyFile.PostedFile.ContentLength.ToString();
FileDetails.Visible = true; //div is made visible
// Save uploaded file to server at the in the Pics folder
+ "pics\\" + UploadedFileName );
//thumbnail creation starts
//Retrieve the image filename whose thumbnail has to be created
String imageUrl = UploadedFileName;
//Read in the width and height
int imageHeight =Convert.ToInt32(h.Text);
int imageWidth = Convert.ToInt32(w.Text);
//You may even specify a standard thumbnail size
//int imageWidth = 70;
//int imageHeight = 70;
if (imageUrl.IndexOf("/") >= 0 || imageUrl.IndexOf("\\") >= 0 )
//We found a / or \
//the uploaded image will be stored in the Pics folder.
//to get resize the image, the original image has to be
//accessed from the Pics folder
imageUrl = "pics/" + imageUrl;
= new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
= fullSizeImg.GetThumbnailImage(imageWidth, imageHeight,
//We need to create a unique filename for each generated image
DateTime MyDate = DateTime.Now;
String MyString = MyDate.ToString("ddMMyyhhmmss") + ".png" ;
//Save the thumbnail in PNG format.
//You may change it to a diff format with the ImageFormat property
thumbNailImg.Save ( Request.PhysicalApplicationPath
+ "pics\\" + MyString , ImageFormat.Png);
//Display the original & the newly generated thumbnail
Image1.AlternateText = "Original image";
Image1.ImageUrl="pics\\" + UploadedFileName;
Image2.AlternateText = "Thumbnail";
Image2.ImageUrl="pics\\" + MyString;
Response.Write("An error occurred - " + ex.ToString());
//this function is reqd for thumbnail creation
public bool ThumbnailCallback()
How to run the app
Unzip & run the .aspx file using IIS. Make sure a folder named PICS is created before-hand in the current working directory.
This article demonstrates how the quality of dynamically created images can be maintained & even enhanced by saving them in PNG format.