Wednesday 30 March 2011

How to store Image in database using “Image datatype


Introduction- In this article, I will explain how we can store image in the database. This is very interesting article. The need to store image in database occur, when there is a issue of security. I mean we can store the image of the signature of the human, becoz of the banking security. To store the image in the database, here I am using byte[] array. First I will convert the image into byte array[] and then it will store in the database.

Implementation- Create a website, create a page named storeimage.aspx. Place a textbox named txt_name and a fileuploader named upload_image. Here textbox will use to enter the image name and fileuploader is used to upload the image. Also place a gridview at this page to show the image.Then go to the website menu and place a Handler.ashx file.




Database
Create a table named addimage. Here iam explainning the columns that we need for a table to insert the image in the data base.
Column                       datatype
Id                                int (set its auto increment property)
Imagename                  varchar(50)
Image                          image



HTMl code for storeimage.aspx page
<%--<div>
        &nbsp;<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
        <asp:FileUpload ID="img_uploader" runat="server" /><br />
        <br />
        <asp:Button ID="btnUpload" runat="server" OnClick="btnUpload_Click" Text="Upload" /><br />
        <br />
        <asp:Label ID="lblMessage" runat="server"></asp:Label><br />
        <br />
        <br />
<asp:GridView ID="GridView1" runat="server"
              AutoGenerateColumns="False" DataKeyNames="ID"
              DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID"
                InsertVisible="False" ReadOnly="True"
                               SortExpression="ID" />
<asp:BoundField DataField="ImageName" HeaderText="ImageName"
                               SortExpression="ImageName" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<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:cnn %>"
SelectCommand="SELECT [ID], [ImageName], [Image]
              FROM [Images]"></asp:SqlDataSource>
   
    </div> --%>

Code for storeimage.aspx.cs page

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;
// i need the using system.IO named namespace to store the image in the database.
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnUpload_Click(object sender, EventArgs e)
{
// the str_imagename variable is use yo store the imagename from textbox.
string str_ImageName = txtName.Text.ToString();
if (img_uploader.PostedFile != null && img_uploader.PostedFile.FileName != "")
{
// here i am using a byte array type variable named imagesize to store the length of the image.
byte[] image_Size = new byte[img_uploader.PostedFile.ContentLength];
// here i am using httppostedfile type object to store the image that will store in the postedfile
HttpPostedFile uploadedImage = img_uploader.PostedFile;
// here i am using inputstream.read method to read the image size in the byte array
uploadedImage.InputStream.Read(image_Size, 0, (int)img_uploader.PostedFile.ContentLength);
// here i am creating the sqlconnection to store the image in database.
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["cnn"].ConnectionString;
// Create SQL Command
SqlCommand cmd = new SqlCommand();
// this is a sql query which will store the imagename and image that's converted in byte array, in the table
cmd.CommandText = "INSERT INTO addimage (ImageName,Image) VALUES (@ImageName,@Image)";
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
// here i am passing a parameter to store the imagename in the database.
SqlParameter ImageName = new SqlParameter("@ImageName", SqlDbType.VarChar, 50);
ImageName.Value = str_ImageName.ToString();
cmd.Parameters.Add(ImageName);
// her i am passing the parameter to store the image in the database
SqlParameter UploadedImage = new SqlParameter("@Image", SqlDbType.Image, image_Size.Length);
UploadedImage.Value = image_Size;
cmd.Parameters.Add(UploadedImage);
con.Open();
int result = cmd.ExecuteNonQuery();
con.Close();
if (result > 0)
// after uploading the image the label will display.
lblMessage.Text = "File Uploaded";
// i am using imagehandler to bind the gridview with the image after fetching from the database.
GridView1.DataBind();
}
}
}

Handler.ashx code


// here I am explain how we can fetch data from database and show it into the database.

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

using System;
using System.Web;
using System.Configuration;
using System.Data.SqlClient;

public class Handler : IHttpHandler {

public void ProcessRequest (HttpContext context)
{
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["cnn"].ConnectionString;

// Create SQL Command

SqlCommand cmd = new SqlCommand();
// sql query to select image and image name from the table.
cmd.CommandText = "Select addimage,Image from Images where ID =@ID";
cmd.CommandType = System.Data.CommandType.Text;
cmd.Connection = con;
// here i am passing parameter.
SqlParameter ImageID = new SqlParameter("@ID", System.Data.SqlDbType.Int);
ImageID.Value = context.Request.QueryString["ID"];
cmd.Parameters.Add(ImageID);
con.Open();
SqlDataReader dReader = cmd.ExecuteReader();
dReader.Read();
// this code read the binary of the image
context.Response.BinaryWrite((byte[])dReader["Image"]);
dReader.Close();
con.Close();
}
public bool IsReusable
{
get
{
return false;
}
}



}


6 comments:

  1. thank you it is very usefullcode

    ReplyDelete
    Replies
    1. Hi!! jay shankar Prasad Thankx you sir. Please feel free to get in touch with my blog and you can also give us your expensive suggestions to improve this blog.

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This code is fine but i want validation for image height and width 100px * 100px before uploading Image

    ReplyDelete


  4. Given so much information in it. its very useful .perfect explanation about Dot net framework.Thanks for your valuable information. dot net training in chennai velachery | dot net training institute in velachery

    ReplyDelete