Uploading image into BLOB Field:

Create a table with the following fields as shown in below figure.

Walkthrough:

1)      Drag a FileUpload control into a WebForm (ImageUpload.aspx in our Example), a textbox for entering image name and a button for uploading.

2)      Configure connection string in Web.Config file

3)      Copy the following code into Upload button click event.

Stream imgStream = fuImage.PostedFile.InputStream;

int imgLen = fuImage.PostedFile.ContentLength;

string imgName = txtImageName.Text;

byte[] imgBinaryData = new byte[imgLen];

int n = imgStream.Read(imgBinaryData,0,imgLen);

//use the web.config to store the connection string

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);

SqlCommand command = new SqlCommand("INSERT INTO Image (imagename,image) VALUES ( @img_name, @img_data)", connection);

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

param0.Value = imgName;

command.Parameters.Add(param0);

SqlParameter param1 = new SqlParameter("@img_data", SqlDbType.Image);

param1.Value = imgBinaryData;

command.Parameters.Add(param1);

connection.Open();

int numRowsAffected = command.ExecuteNonQuery();

connection.Close();

Where fuImage in the above code is the ID of the FileUpload control. Next section will help us implementing the HttpHandler to retrieve the stored image from database.

Implementing HttpHandler for fetching image from Database:

Create a HttpHandler with the name "ImageHandler.ashx". Read my previous article on implementing an HttpHandler which fetches the image stored in the database by accepting imageID as query string here.
The HttpHandler can be called by,

ImageHandler.ashx?ImID=100

And ImageHandler.ashx implementation is,

<%@ WebHandler Language="C#" Class="ImageHandler" %>

using System;

using System.Web;

using System.Configuration;

using System.Data.SqlClient;

public class ImageHandler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

string imageid = context.Request.QueryString["ImID"];

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);

connection.Open();

SqlCommand command = new SqlCommand("select Image from Image where ImageID="+imageid, connection);

SqlDataReader dr = command.ExecuteReader();

dr.Read();

context.Response.BinaryWrite((Byte[])dr[0]);

connection.Close();

context.Response.End();

}

public bool IsReusable {

get {

return false;

}

}

}

We can use this HttpHandler to retrieve the image from database and can bind it to the Gridview. Next section will help you to do that.

Binding it to a Gridview:

1)      Drag a Gridview into the WebForm and name it as gvImages,

2)      Use the following code for binding the Gridview,

SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);

SqlCommand command = new SqlCommand("SELECT imagename,ImageID from [Image]", connection);

SqlDataAdapter ada = new SqlDataAdapter(command);

ada.Fill(dt);

gvImages.DataSource = dt;

gvImages.DataBind();

Gridview HTML will be,

<asp:GridView Width="500px" ID="gvImages" runat="server" AutoGenerateColumns="False" >

<Columns>

<asp:BoundField HeaderText = "Image Name" DataField="imagename" />

<asp:TemplateField HeaderText="Image">

<ItemTemplate>

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

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>