How To Send Selected Images From Gridview To Database

In this tutorial, I’ll show you how to send the selected images from GridView to database. For that, I’ll first upload some of the images to my database table, and then load these images to GridView. Then, after selecting a few images from the GridView, we will save them to another database table.

Initial Chamber

Step 1

Open your Visual Studio 2010 and create an empty website.

Give it a suitable name [gridview_demo].

Step 2

In Solution Explorer, you get your empty website. Add a web form and SQL Database –

For Web Form

gridview_demo (Your Empty Website) -> Right Click -> Add New Item -> Web Form. Name it as -> gridview_demo.aspx.

For SQL Server Database

gridview_demo (Your Empty Website) -> Right Click -> Add New Item -> SQL Server Database. [Add Database inside the App_Data_folder].

Database Chamber

Step 3

Get to your Database [Database.mdf]. We will create a table -> tbl_image, and tbl_save.

Go to the database.mdf - -> Table - -> Add New table. Design your tables like this -

Tbl_image

Tbl_save

Design Chamber

Step 4

Open your grid_demo.aspx file to create our design. We will drag an HTML table, a FileUpload control, two buttons and a label, and a Textbox and GridView.

Code Chamber

Step 5

Open grid_demo.aspx.cs file to write code to save the image to database. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Data.SqlClient;
using System.Data.Sql;
using System.Data;
using System.Web.UI.WebControls;

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

    SqlConnection con = new SqlConnection(@"Data Source=Nilesh;Initial Catalog=test_db;Integrated Security=True");
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            refreshdata();

        }

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (FileUpload1.HasFile)
        {
            string str = FileUpload1.FileName;
            FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Upload/") + str);
            string image = "~/Upload/" + str.ToString();
            string imagename = TextBox3.Text;
            SqlCommand cmd = new SqlCommand("insert into tbl_image values(@imagename,@image)", con);
            cmd.Parameters.AddWithValue("@imagename", imagename);
            cmd.Parameters.AddWithValue("@image",image);

            con.Open();
            int i = cmd.ExecuteNonQuery();
            con.Close();

            refreshdata();

            Label1.Text = "File Uploaded";
            Label1.ForeColor = System.Drawing.Color.Green;

        }

        else
        {
            Label1.Text = "Please Upload valid file";
            Label1.ForeColor = System.Drawing.Color.Red;

        }


    }

    public void refreshdata()
    {

        SqlCommand cmd = new SqlCommand("select * from tbl_image",con);
        SqlDataAdapter sda = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        sda.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();

    }

    protected void Button2_Click(object sender, EventArgs e)
    {

        foreach (GridViewRow gvrows in GridView1.Rows)
        {
            var checkbox = gvrows.FindControl("CheckBox1") as CheckBox;
            if (checkbox.Checked)
            {

                var lblname = gvrows.FindControl("Label2") as Label;
                SqlCommand cmd = new SqlCommand("insert into tbl_save values(@imagename)", con);
                cmd.Parameters.AddWithValue("imagename", lblname.Text);
                con.Open();
                int i = cmd.ExecuteNonQuery();
                con.Close();
                Label3.Text = "Image Saved";
                Label1.ForeColor = System.Drawing.Color.Green;

                refreshdata();

            }

            else
            {

                Label3.Text = "Please try it again";
                Label1.ForeColor = System.Drawing.Color.Red;
            }





        }

    }
}

OUTPUT

Let’s say, we upload the image name test5 in our database table (tbl_image) and it is also been loaded in the GridView dynamically.

Now, the user has chosen to save that test5 image to our database table (tbl_save). The user will select it and press on Save button. You can see your image in tbl_save now.

Hope you like it. Thank you for reading.

Have a good day!