Uploading, Determining Size, Width and Height and Resizing Image Files with ASP.NET

Overview
In this article we will learn how to determine the size and dimensions ( width & height ) of an uploaded image? allow the image to be uploaded if it is less than given size? or if it's width and height are less than given values? and finally how to resize an image to create thumbnails?

Note: The details of file uploading with ASP.NET will not be covered here. They have been covered in detail in separate articles ( see below ). Please consult those articles first if you feel uncomfortable with the code shown in this article.

File Uploading Using ASP.NET
Here are few Stardeveloper articles on this topic:

File uploading to server hard disk.
File uploading to Microsoft Access database.
Determining size, width & height and resizing image files ( this article ).

Problem
Ok, let's get started with this article. Let's write down the requirements first:

Be able to upload only image files.
Be able to determine the size, width & height of the uploaded image file.
Be able to resize and create thumbnails of all uploaded image files.
Be able to view all the thumbnails of all uploaded images on a single page.

We'll also learn how to allow image files of certain size ( e.g. less than 3 KB ) and dimensions ( e.g. width less than 300px, height less than 300 px ) to be uploaded only if they meet our requirements. This is important because a lot of users had wanted me to explain how to allow only image files of certain size, width and height to be uploaded; I'll explain that in this article.

Design
Our application will consist of following:

3 ASP.NET pages:
- default.aspx - displays all the thumbnails.
- upload.aspx - allows image uploading.
- file.aspx - view, download or delete image files.
uploaded_images - for all uploaded image files ( including thumbnails ).
build.bat - for compiling all code-behind classes.

The design is simple and the code is even simpler. In this article I'll only explain the code that is responsible for determining the size, width and height of uploaded image files. Rest of the code which is responsible for handling file uploads has been explained in great detail in separate articles ( see above ).

Solution
Let's start coding our ASP.NET pages.

i. default.aspx
This page will be responsible for displaying all the thumbnails of all uploaded images files in the 'uploaded_images' folder. These thumbnails are generated by upload.aspx page every time an image gets uploaded. This page will also display links to view, download and delete those image files.

Create a new default.aspx ASP.NET page and copy/paste following code in it:

<%@ Page language="c#" Codebehind="default.aspx.cs" AutoEventWireup="false"
	Inherits="Stardeveloper.UploadImage.DefaultForm" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 

<html>
<head>
	<style>
	body { margin: 0px 0px 0px 0px; padding: 10px 10px 10px 10px; }
	body, input, td, select { font: 11pt Verdana; }
	a { color: #5A7193; }
	.stdInput { width: 500px; }
	.smInput { width: 250px; }
	.dimColor { color: Gray; }
	.imgInfo { font: 8pt Verdana; }
	</style>
</head>
<body>

<table align="center" width="100%" border="1" bordercolor="silver"
	cellpadding="2" cellspacing="2">
	<tr>
		<td align="right">
		Main Page � 
		<a href="upload.aspx">Upload Images</a> 
		� 
		</td>
	</tr>
</table><br>

<table align="center" width="100%" border="1" bordercolor="silver"
	cellpadding="2" cellspacing="2">
	<tr>
		<td bgcolor="#CCDDEE" align="center">
		Uploaded Images To Server Hard Disk
		</td>
	</tr>
	<tr>
		<td bgcolor="#F7F7F7" align="center">
		i. Image Files
		</td>
	</tr>
	<tr>
		<td>
		<div id="imageFiles" runat="server" />
		</td>
	</tr>
</table>
	
</body>
</html>