Use File Upload Control With GridView Control

Upload a file in GridView Edit Mode

Here i am giving an example of how to use file upload control in asp.net for saving images in a folder on server and with GridView in edit mode

Here I give an example of saving book information in a database table. We will upload an image for every book using file upload control . The data then will be displayed in grid view where we can edit this information

I m using following table in my Example

Column name Datatype
Bookid* Int
Booktit Varchar(100)
Bookimg Varchar(100)

*Book id column wil be auto increment





You can use following code in your .aspx page

Book Title<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
book Image<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<br />

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" DataKeyNames="bookid,bookimg"
onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating">
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Book Title">
<ItemTemplate>
<%#Eval("booktit") %>
</ItemTemplate>
<EditItemTemplate>
<%#Eval("booktit") %>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<img id="im1" runat="server" src='<%#Eval("bookimg",@"Images/{0}")%>' height="120" width="120" />
</ItemTemplate>
<EditItemTemplate>

<asp:FileUpload ID="fu1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton ID="lk1" runat="server" CommandName="edit" Text="Edit"></asp:LinkButton>

</ItemTemplate>
<EditItemTemplate>
<asp:LinkButton ID="lk2" runat="server" CommandName="update" Text="Update"></asp:LinkButton>
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

 Now add following code in .cs file  

protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack == false)
gridbind();
}
//method to bind gridview
protected void gridbind()
{
SqlDataAdapter adp = new SqlDataAdapter("Select * from tbbook", "server=.;database=database1;uid=sa");
DataSet ds = new DataSet();
adp.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
//grid view edit event
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
gridbind();
}
//update event
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int bookid;
string bookimg;
bookid = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value);
FileUpload file = ((FileUpload)(GridView1.Rows[e.RowIndex].FindControl("fu1")));

if (file.FileName.Length > 0)//checking if user uploaded any file
{
bookimg = file.FileName;
file.PostedFile.SaveAs(Server.MapPath(@"Images/" + bookimg));//saving uploaded file in Images folder
}
else
{
bookimg = GridView1.DataKeys[e.RowIndex]["bookimg"].ToString();
}
SqlConnection con = new SqlConnection("server=.;database=database1;uid=sa");
con.Open();
SqlCommand cmd = new SqlCommand("update tbbook set bookimg=@bookimg where bookid=@bookid");
cmd.Connection = con;
cmd.Parameters.Add("@bookid", SqlDbType.Int).Value = bookid;
cmd.Parameters.Add("@bookimg", SqlDbType.VarChar,50).Value = bookimg;
cmd.ExecuteNonQuery();
con.Close();
GridView1.EditIndex = -1;
gridbind();
}
protected void Button1_Click(object sender, EventArgs e)
{
string booktitle = TextBox1.Text;
string bookimage = FileUpload1.FileName;
//saving uploaded image in Images folder
FileUpload1.PostedFile.SaveAs(Server.MapPath(@"Images/" + FileUpload1.FileName));
//saving info in database
SqlConnection con = new SqlConnection("server=.;database=database1;uid=sa");
con.Open();
SqlCommand cmd = new SqlCommand("insert into tbbook values(@booktit,@bookimg)");
cmd.Connection = con;
cmd.Parameters.Add("@booktit", SqlDbType.VarChar, 100).Value = booktitle;
cmd.Parameters.Add("@bookimg", SqlDbType.VarChar, 50).Value = bookimage;
cmd.ExecuteNonQuery();
cmd.Dispose();
con.Close();
gridbind();
 }

no fear choudhary is here, Saturday, September 10, 2011