Insert image into database from asp.net gridview

Question

Below is my UI and Table. I wanted to insert image of a child inside the gridview, which will be saved in the database as well. Please assist how i suppose to achieve this.

Datatype for image on table is varchar(MAX).

here is what i have done so far.

(C# Code)

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

  namespace MyProject
  {
public partial class managechild : System.Web.UI.Page
{

SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["lolConnectionString1"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack)
    {           
        BindGrid();
    }
} 
protected void BindGrid()
{
    string session = System.Web.HttpContext.Current.User.Identity.Name;
    Response.Cookies["uname"].Value = session;

    DataSet ds = new DataSet();
    conn.Open();
    string cmdstr = "SELECT * from child c join parent p on c.ParentId = p.ParentId join login l on l.Username = p.UserId where l.Username ='" + session + "'";
    SqlCommand cmd = new SqlCommand(cmdstr, conn);
    SqlDataAdapter adp = new SqlDataAdapter(cmd);
    adp.Fill(ds);
    gvUpload.DataSource = ds;
    gvUpload.DataBind();
    conn.Close();
}

protected void btnUpload_OnClick(object sender, EventArgs e)
{
        TextBox txtName = (TextBox)gvUpload.SelectedRow.FindControl("ChildName");
        FileUpload fuploadFile = (FileUpload)gvUpload.SelectedRow.FindControl("fUpload");
        Button btnUpload = (Button)gvUpload.SelectedRow.FindControl("btnUpload");

if (fuploadFile.HasFile)
{               
    string fileName = fuploadFile.FileName;
    string exten = Path.GetExtension(fileName); 
    //here we have to restrict file type            
    exten = exten.ToLower();
    string[] acceptedFileTypes = new string[4];            
    acceptedFileTypes[0] = ".jpg";
    acceptedFileTypes[1] = ".jpeg";
    acceptedFileTypes[2] = ".gif";
    acceptedFileTypes[3] = ".png";                               
    bool acceptFile = false;              
    for (int i = 0; i <= 3; i++)
    {
        if (exten == acceptedFileTypes[i])
        {                     
            acceptFile = true;
        }
    } 
    if (!acceptFile)
    {
        lblMsg.Text = "The file you are trying to upload is not a permitted file type!";
    }
    else
    {
        //upload the file onto the server                   
        fuploadFile.SaveAs(Server.MapPath("~/images/child/"+fileName));

        conn.Open();
        string cmdstr = "insert into Child (Image) values (@photo)";
        SqlCommand cmd = new SqlCommand(cmdstr, conn);
        cmd.Parameters.AddWithValue("@photo", "images/child/"+fileName);
        cmd.ExecuteNonQuery();
        conn.Close();
        BindGrid();
    }
}       
} 

}
}

enter image description here

UI Code (asp.net)

    <asp:GridView ID="gvUpload" runat="server" AutoGenerateColumns="False" 
                ShowFooter="True" CellPadding="4" ForeColor="#333333" GridLines="None" 
                style="margin-left: 128px">
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
   <Columns>
    <asp:TemplateField HeaderText="Child Name">
        <ItemTemplate>
            <asp:Label ID="lblName" runat="server" Text='<%#DataBinder.
                              Eval(Container.DataItem, "ChildName") %>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField> 
    <asp:TemplateField HeaderText="Image">
    <ItemTemplate>
         <asp:Image ID="imgPhoto" runat="server" Width="100px" Height="120px"
                 ImageUrl='<%#DataBinder.Eval(Container.DataItem, "Image") %>' />
    </ItemTemplate>
    <ItemTemplate>
         <asp:FileUpload ID="fUpload" runat="server" />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Button ID="btnUpload" runat="server" Text="Upload"
                                           OnClick="btnUpload_OnClick" />
        </ItemTemplate>
    </asp:TemplateField>
    </Columns>
            <EditRowStyle BackColor="#999999" />
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#E9E7E2" />
            <SortedAscendingHeaderStyle BackColor="#506C8C" />
            <SortedDescendingCellStyle BackColor="#FFFDF8" />
            <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>

image binary data. Is that right ? i just wanted it to be able to retrieve back. — Roshan, Nov 10 '13 at 15:27
Yes, use Varbinary field to store data and use method to upload 'em into DB depending on what data access mechanism you use. — LINQ2Vodka, Nov 10 '13 at 15:29
please refer to my question back. I have update what i have done, but still couldn't upload image to database. — Roshan, Nov 10 '13 at 16:50
http://stackoverflow.com/questions/3548401/how-to-save-image-in-database-using-c-sharp — LINQ2Vodka, Nov 10 '13 at 16:55

score 2 · Answer 1 · answered Nov 10 '13 at 15:16

When posting on SO pls make sure to show at least some attempt to solve the problem yourself before asking others for complete solution.

One way is to save image in database as binary data in which case you'll need to add varbinary column to your table.

Another way is to only save the path to the image and save the image in some folder on the server.

If you don't have a lot of images I'd suggest you go with the second solution as it will be easier to implement. Just look up how to upload image file and you'll be on the right track.

please refer to my question back. I have update what i have done, but still couldn't upload image to database. — Roshan, Nov 10 '13 at 16:49

Insert image into database from asp.net gridview

1 Answers1