How to insert image into database and display in Gidview without Image Handler.

Wednesday, October 30, 2013 Sourav Mondal ASP.NET

Introduction

In this post, I explain how to insert an image into a database and display it in gridview without Image Handler.

Steps :

Step-1 : Create New Project

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create a table (for store image).

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.

Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add Web Page.

Go to Solution Explorer > Right Click on Project under solution explorer > Add > New item > Select Web Form using Master Page under web > Enter Name > > Select Master Page>Add.

Here is HTML Code

<h3>My Image Gallery</h3>
    <div>
        <table>
            <tr>
                <td>Image Title : </td>
                <td>
                    <asp:TextBox ID="txtImageTitle" runat="server"></asp:TextBox></td>
            </tr>
            <tr>
                <td>Image : </td>
                <td>
                    <asp:FileUpload ID="FUImage" runat="server" /></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
                    <asp:Label ID="lblMsg" runat="server" />
                </td>
            </tr>
        </table>
        <br />
        <div>
            <asp:GridView ID="gvGallery" runat="server" AutoGenerateColumns="false" Width="50%">
                <EmptyDataTemplate>
                    <div style="text-align:center">
                        No Image Found
                    </div>
                </EmptyDataTemplate>
                <Columns>
                    <asp:BoundField HeaderText="Title" DataField="ImageTitle" />
                    <asp:TemplateField ItemStyle-Width="150px">
                        <ItemTemplate>
                            <asp:Image ID="Image1" runat="server" Width="100px" ImageUrl='<%#Eval("Picture").ToString() == ""?"": GetImageString64((byte[])Eval("Picture")) %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>
    </div>

Step-6: Add Code For Populate Image in gridview.

Write the followings code in your page load event for fetch Data from Database and show in gridview.

PAGE LOAD CODE

if (!IsPostBack)
{
    PopulateGallery();
}

And Here is the function code

private void PopulateGallery()
{
    // here code for populate image gallery
    using (MyDatabaseEntities1 dc = new MyDatabaseEntities1())
    {
        List<ImageGallery> imgGallery = new List<ImageGallery>();
        imgGallery = dc.ImageGalleries.ToList();
        gvGallery.DataSource = imgGallery;
        gvGallery.DataBind();
    }
}

Write below function to your page For Convert byte image data to base64String.

protected string GetImageString64(byte[] Image)
{
    // For convert byte image to base 64 string
    string base64String = Convert.ToBase64String(Image, 0, Image.Length);
    return "data:image/png;base64 ," + base64String;
}

Step-7: Add Code For Save Image.

Write the followings code in Button Click event for save an image to the database.

protected void btnSave_Click(object sender, EventArgs e)
{
    // Code for Save Image
    if (FUImage.HasFile)
    {
        int length = FUImage.PostedFile.ContentLength;
        byte[] img = new byte[length];
        FUImage.PostedFile.InputStream.Read(img, 0, length);
        ImageGallery ig = new ImageGallery
        {
            SLID = 0,
            ImageTitle = txtImageTitle.Text.Trim(),
            Picture = img
        };
        using (MyDatabaseEntities1 dc = new MyDatabaseEntities1())
        {
            dc.ImageGalleries.Add(ig);
            dc.SaveChanges();
            lblMsg.Text = "Successfully Saved";
 
            // populate Gallery image Here
            PopulateGallery();
        }
    }
}

If you are not using Entity Framework, write the below code in button click event for saving an image to a database.

protected void Button1_Click(object sender, EventArgs e)
{
    if (FUImage.HasFile)
    {
        int length = FUImage.PostedFile.ContentLength;
        byte[] imgbyte = new byte[length];
        HttpPostedFile img = FUImage.PostedFile;
        img.InputStream.Read(imgbyte, 0, length);
        SqlConnection connection = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ToString());
        connection.Open();
        SqlCommand cmd = new SqlCommand("INSERT INTO ImageGallery (ImageTitle, Picture) VALUES (@ImageTitle,@Picture)", connection);
        cmd.Parameters.Add("@ImageTitle", SqlDbType.VarChar,150).Value = txtImageTitle.Text.Trim();
        cmd.Parameters.Add("@Picture", SqlDbType.Image).Value = imgbyte;
        int count = cmd.ExecuteNonQuery();
        connection.Close();                
    }
}

STEP-8: Run Application

Run Application and Get result in your browser.

Give me a +1 if it is helpful. Thank You