Resize Image before Upload to Databse ASP.NET

In this example i am going to describe how to resize image in ASP.NET before/and upload to ms sql database using C# and Vb.NET.

For this i am using FileUpload control to upload the image in datbase after resizing.
I am also displaying the Image in Gridviw after uploading to database.

To know how to display images in gridview read Display Images In GridView From DataBase

ASPX page html markup look like this
<form id="form1" runat="server">

<div>

<asp:textbox id="txtName" runat="server"></asp:textbox>

<asp:fileupload id="FileUpload1" runat="server" />

<br />

<asp:button id="btnUpload" runat="server" onclick="btnUpload_Click" text="Upload" />

<br />

<asp:label id="lblMessage" runat="server"></asp:label>

<asp:gridview id="GridView1" runat="server" autogeneratecolumns="False" datakeynames="ID"

datasourceid="SqlDataSource1">

<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"

SortExpression="ID" />

<asp:BoundField DataField="ImageName" HeaderText="ImageName" SortExpression="ImageName" />

<asp:TemplateField HeaderText="Image">

<asp:Image ID="Image1" runat="server" ImageUrl='<%# "Handler.ashx?ID=" + Eval("ID")%>' />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:gridview>

<asp:sqldatasource id="SqlDataSource1" runat="server" connectionstring="<%$ ConnectionStrings:ConnectionString %>"

selectcommand="SELECT [ID], [ImageName], [Image]

FROM [Images]"></asp:sqldatasource>

</div>

</form>

C# Code Behind

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.IO;

using System.Data.SqlClient;

using System.Drawing.Imaging;

using System.Drawing.Drawing2D;

using System.Drawing;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnUpload_Click(object sender, EventArgs e)

{

string strImageName = txtName.Text.ToString();

if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != "")

{

string strExtension = System.IO.Path.GetExtension(FileUpload1.FileName);

if ((strExtension.ToUpper() == ".JPG") | (strExtension.ToUpper() == ".GIF"))

{

// Resize Image Before Uploading to DataBase

System.Drawing.Image imageToBeResized = System.Drawing.Image.FromStream(FileUpload1.PostedFile.InputStream);

int imageHeight = imageToBeResized.Height;

int imageWidth = imageToBeResized.Width;

int maxHeight = 240;

int maxWidth = 320;

imageHeight = (imageHeight * maxWidth) / imageWidth;

imageWidth = maxWidth;

if (imageHeight > maxHeight)

{

imageWidth = (imageWidth * maxHeight) / imageHeight;

imageHeight = maxHeight;

}

Bitmap bitmap = new Bitmap(imageToBeResized, imageWidth, imageHeight);

System.IO.MemoryStream stream = new MemoryStream();

bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);

stream.Position = 0;

byte[] image = new byte[stream.Length + 1];

stream.Read(image, 0, image.Length);

// Create SQL Connection

SqlConnection con = new SqlConnection();

con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;

// Create SQL Command

SqlCommand cmd = new SqlCommand();

cmd.CommandText = "INSERT INTO Images(ImageName,Image) VALUES (@ImageName,@Image)";

cmd.CommandType = CommandType.Text;

cmd.Connection = con;

SqlParameter ImageName = new SqlParameter("@ImageName", SqlDbType.VarChar, 50);

ImageName.Value = strImageName.ToString();

cmd.Parameters.Add(ImageName);

SqlParameter UploadedImage = new SqlParameter("@Image", SqlDbType.Image, image.Length);

UploadedImage.Value = image;

cmd.Parameters.Add(UploadedImage);

con.Open();

int result = cmd.ExecuteNonQuery();

con.Close();

if (result > 0)

lblMessage.Text = "File Uploaded";

GridView1.DataBind();

}

VB.NET Code Behind

Imports System

Imports System.Data

Imports System.Configuration

Imports System.Web

Imports System.Web.Security

Imports System.Web.UI

Imports System.Web.UI.WebControls

Imports System.Web.UI.WebControls.WebParts

Imports System.Web.UI.HtmlControls

Imports System.IO

Imports System.Data.SqlClient

Imports System.Drawing.Imaging

Imports System.Drawing.Drawing2D

Imports System.Drawing

Partial Public Class
_Default

    Inherits System.Web.UI.Page

    Protected Sub
Page_Load(ByVal sender As
Object, ByVal e
As EventArgs)

    End Sub

    Protected Sub
btnUpload_Click(ByVal sender As Object, ByVal e As EventArgs)

        Dim strImageName As String = txtName.Text.ToString()

        If FileUpload1.PostedFile IsNot
Nothing AndAlso
FileUpload1.PostedFile.FileName <> ""
Then

            Dim strExtension As String =
System.IO.Path.GetExtension(FileUpload1.FileName)

            If (strExtension.ToUpper() = ".JPG")
Or (strExtension.ToUpper() = ".GIF") Then

                ' Resize Image Before Uploading to DataBase

                Dim imageToBeResized As
System.Drawing.Image =
System.Drawing.Image.FromStream(FileUpload1.PostedFile.InputStream)

                Dim imageHeight As Integer = imageToBeResized.Height

                Dim imageWidth As Integer = imageToBeResized.Width

                Dim maxHeight As Integer = 240

                Dim maxWidth As Integer = 320

imageHeight = (imageHeight * maxWidth) / imageWidth

imageWidth = maxWidth

                If imageHeight > maxHeight Then

imageWidth = (imageWidth * maxHeight) / imageHeight

imageHeight = maxHeight

                End If

                Dim bitmap As New Bitmap(imageToBeResized, imageWidth, imageHeight)

                Dim stream As
System.IO.MemoryStream = New MemoryStream()

bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg)

stream.Position = 0

                Dim image As Byte() = New Byte(stream.Length) {}

stream.Read(image, 0, image.Length)

                ' Create SQL Connection

                Dim con As New SqlConnection()

                con.ConnectionString =
ConfigurationManager.ConnectionStrings("ConnectionString").ConnectionString

                ' Create SQL Command

                Dim cmd As New SqlCommand()

cmd.CommandText = "INSERT INTO
Images(ImageName,Image) VALUES (@ImageName,@Image)"

cmd.CommandType = CommandType.Text

cmd.Connection = con

                Dim ImageName As New SqlParameter("@ImageName",
SqlDbType.VarChar, 50)

ImageName.Value = strImageName.ToString()

cmd.Parameters.Add(ImageName)

                Dim UploadedImage As New SqlParameter("@Image",
SqlDbType.Image, image.Length)

UploadedImage.Value = image

                cmd.Parameters.Add(UploadedImage)

con.Open()

                Dim result As Integer = cmd.ExecuteNonQuery()

con.Close()

                If result > 0 Then

lblMessage.Text = "File Uploaded"

                End If

GridView1.DataBind()

            End If

        End If

    End Sub

End Class