How to insert image into database and display it in gidview

Question

I having problem on saving image into my database. I don't know how to insert or store image into my database and display in my gridview.

Here's my design of my table:

In my web method :

[WebMethod(EnableSession = true)]
public string sell_item(string name, Image photo, string description)
{
    SqlConnection con = new SqlConnection("Data Source=USER-PC;Initial Catalog=Bidding;Integrated Security=True");
    con.Open();
    SqlCommand cmd = new SqlCommand("UPDATE login SET name = @name, photo = @photo, description = @description WHERE username=@username", con);

    cmd.Parameters.AddWithValue("@name", name);
    cmd.Parameters.AddWithValue("@photo", photo);
    cmd.Parameters.AddWithValue("@description", description);

    cmd.ExecuteNonQuery();
    con.Close();
    return "Product has been upload successfully!";
}

My code in web application which call the web service:

I using FileUpload button to choose my image file.

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = Convert.ToString(a.sell_item(Convert.ToString(TextBoxName.Text), Convert.ToString(FileUploadPhoto.FileName), Convert.ToString(TextBoxDescription.Text)));

    Label1.Visible = true;
    if (Label1.Visible == true)
    {
        MessageBox.Show("Item has been uploaded successfully!", "Success", MessageBoxButtons.OK, MessageBoxIcon.Information, MessageBoxDefaultButton.Button1, MessageBoxOptions.DefaultDesktopOnly);
        Response.Redirect("Menu page.aspx");
    }
}

In my gridview I have set the properties :

The image wouldn't display in the gridview. I'm still new to c#. Anyone can help me? Thanks.

Answer 1

You may want to check out this article on how to save images to a database. More information on the type of database / column you are trying to save the image would be helpful as well. Also maybe the code for the gridview.

edit: This post has some helpful code on storing in an image column.

Answer 2

If the image isn't saving correctly to the database, try to save with a byte array:

protected void Button1_Click(object sender, EventArgs e)
{
    if (fileUploadPhoto.HasFile)
    {
        byte[] imageBytes = new byte[fileUploadPhoto.PostedFile.InputStream.Length + 1];
        fileUploadPhoto.PostedFile.InputStream.Read(imageBytes, 0, imageBytes.Length);
    }

    Label1.Text = Convert.ToString(a.sell_item(Convert.ToString(TextBoxName.Text), imageBytes, Convert.ToString(TextBoxDescription.Text)));

    Label1.Visible = true;
    if (Label1.Visible == true)
    {
        MessageBox.Show("Item has been uploaded successfully!", "Success", MessageBoxButtons.OK, MessageBoxIcon.Information, MessageBoxDefaultButton.Button1, MessageBoxOptions.DefaultDesktopOnly);
        Response.Redirect("Menu page.aspx");
    }
}

You'll also need to update your photo parameter to take a byte array:

[WebMethod(EnableSession = true)]
public string sell_item(string name, byte[] photo, string description)
{
    ...
}

As for displaying -- I've used a generic handler (.ashx) to handle the image:

public class ImageHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        //Retrieve the image using whatever method and identifier you used
        byte[] imageData = get_item(context.Request["ID"]);

        if (imageData.Count > 0)
        {
            context.Response.OutputStream.Write(imageData, 0, imageData.Length);
            context.Response.ContentType = "image/JPEG";
        }
    }
}

For displaying you can put the image in the gridview if you bind your datasource:

<ItemTemplate>
    <asp:Image ID="Image1" runat="server"
        ImageUrl='<%# "ImageHandler.ashx?ID=" + Eval("ID")%>'/>
</ItemTemplate>

Or if your familiar with jQuery you can set a placeholder image source that way:

<img id="Image1" />

<script type="text/javascript">
    $("#Image1").attr("src", "ImageHandler.ashx?ID=" + identifier);
</script>

Also there is more information in various articles:

http://csharpdotnetfreak.blogspot.com/2009/07/display-images-gridview-from-database.html

Answer 3

I don't recommend storing images directly in the database, but rather storing them on the filesystem and only saving the link. Otherwise, with SQLServer 2008 use FILESTREAM attribute. For small images, use varbinary type.