How to save images in database and retrieve image from database

Hello friends

In this article, we will explore how to store images in the database and then display those images along with the other server controls

Today I am going to show how you can save   image from web page to database using asp File Upload Control and retrieve same image . There might be various approaches for this I am going show one of them  

Using handlers : by converting image into binary format

I am going to a build a form, with the person’s details and his photo along with it, or for that case, display the image in an ASP.NET server control along with other controls?

Let us start off by first creating a sample database and adding a table to it. We will call the database and the table will be called ‘Tbl_Emp’

Database structure will be like this

            

Step 1: Create a new asp.net website and add a webpage to it    

Step2: Drag and drop two textbox controls. Also drag drop a File Upload control and two button control to upload the selected image on button click and to retrieve record from database. Dropdown List to select list ID which will be used to retrieve selected record from database

Aspx page code will look like below

<div>

      Enter ID  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

      Enter Name <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />

      Enter Pic  <asp:FileUpload ID="FileUpload1" runat="server" /><br />

      <asp:Button ID="Button1" runat="server" Text="Save" onclick="Button1_Click" /><br >

       <asp:Image ID="Image1"  runat="server" Height="137px" Width="130px" /><br />

       

        <asp:DropDownList ID="TextBox3" runat="server">

        </asp:DropDownList>

       

        <asp:Button ID="Button2" runat="server" Text="Search" onclick="Button2_Click" />

    </div>

Step3: code on .cs page

On my code there are three methods

Filldropdown() : used to fill dropdown

Button1_Click : used to save image into database

Button2_Click : used to retrieve image from database

 static SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=E:\websites\HttpHandlerDemo\App_Data\Database.mdf;Integrated Security=True;User Instance=True");

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            filldropdown();

        }

    }

    public void filldropdown()

    {

        SqlCommand cmd = new SqlCommand("Select EmpID from Tbl_Emp", con);

        if (con.State == ConnectionState.Closed)

        {

            con.Open();

        }

        SqlDataReader dr = cmd.ExecuteReader();

        TextBox3.Items.Clear();

        if (dr.HasRows)

        {

            //TextBox3.DataSource = dr["EmpID"].ToString();

            //TextBox3.DataBind();

            while (dr.Read())

            {

                TextBox3.Items.Add(dr["EmpID"].ToString());

            }

        }

        con.Close();

    }

    protected void Button1_Click(object sender, EventArgs e)

    {

        SqlCommand cmd = new SqlCommand("insert into Tbl_Emp values(@id,@name,@image)",con);

        cmd.Parameters.AddWithValue("@id", TextBox1.Text);

        cmd.Parameters.AddWithValue("@name", TextBox2.Text);

        int img = FileUpload1.PostedFile.ContentLength;

        byte[] msdata = new byte[img];

        FileUpload1.PostedFile.InputStream.Read(msdata,0,img);

        cmd.Parameters.AddWithValue("@image", msdata);

        if (con.State == ConnectionState.Closed)

        {

            con.Open();

        }

        cmd.ExecuteNonQuery();

        con.Close();

        filldropdown();

        Response.Write("Data Saved ....");

    }

    protected void Button2_Click(object sender, EventArgs e)

    {

        SqlCommand cmd = new SqlCommand("select * from Tbl_Emp where EmpID=@id", con);

        cmd.Parameters.AddWithValue("@id", TextBox3.Text);

        if (con.State == ConnectionState.Closed)

        {

            con.Open();

        }

        SqlDataReader dr = cmd.ExecuteReader();

        if (dr.HasRows && dr.Read())

        {

            TextBox1.Text = dr["EmpID"].ToString();

            TextBox2.Text = dr["EmpName"].ToString();

            Image1.ImageUrl = "Handler.ashx?EmpID=" + TextBox3.Text;

        }

        else

        {

            Response.Write("Record With This ID Note Found");

        }

      

    }

Step 4: In order to display the image on the page, we will create an Http handler. To do so, right click project > Add New Item > Generic Handler > Handler.ashx. The code shown below, uses the Request.QueryString[“id”] to retrieve the EmpID from it. The ID is then passed to  this handler from drop on button 2 click

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

using System;

using System.Data;

using System.Data.SqlClient;

using System.Web;

public class Handler : IHttpHandler {

    static SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=E:\websites\HttpHandlerDemo\App_Data\Database.mdf;Integrated Security=True;User Instance=True");

   

    public void ProcessRequest (HttpContext context) {

       // context.Response.ContentType = "text/plain";

       // context.Response.Write("Hello World");

        SqlCommand cmd = new SqlCommand("select EmpPic from Tbl_Emp where EmpID=@EmpID",con);

        if (con.State == ConnectionState.Closed)

        {

            con.Open();

        }

        cmd.Parameters.AddWithValue("@EmpID", context.Request.QueryString["EmpID"].ToString());

        SqlDataReader dr = cmd.ExecuteReader();

        if (dr.HasRows && dr.Read())

        {

            context.Response.BinaryWrite((byte[])(dr["EmpPic"]));

        }

      

        con.Close();

       

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

I hope this article was useful 

You can download complete code from this  link Download Code

in next i am going to show how you can display all images in GridView Display Images in GridVIew