Working Saving images in database using ASP.NET FileUpload Control

Saving images in database using ASP.NET FileUpload Control

Saving and displaying images in database tables is a common requirement in ASP.NET projects. There are two ways to store images in database either you store image URLs in database as normal string or you store image as binary data. In this tutorial I will show you how you can upload and save images directly in SQL Server database table as binary data.

For this tutorial I have created a table in SQL Server database called Products with three columns, ID, ProductName and ProductImage as shown in the figure below. Note the data type of ProductImage column is varbinary not image. This is because image data type will be removed in future versions of SQL Server database so avoid using image data type.

Now let’s take a look at the form I am going to use, to upload images to the above table. 
<form id="form1" runat="server">
    Product Name:
    <asp:TextBox id="txtProductName" runat="server" />
    <br />
    Product Image:
    <asp:FileUpload id="FileUpload1" runat="server" />
    <asp:Button id="btnSave" runat="server" Text="Save Product" onclick="btnSave_Click" />
    <br /><br />
    <asp:Label id="lblMessage" runat="server" />   
</form>
The above code looks pretty straightforward as it is just showing one TextBox, one ASP.NET 2.0 FileUpload control and a Button to Save Product Name and Image in database as shown in the following figure: 

Following is the C# code for Save Product button click event. 
protected void btnSave_Click(object sender, EventArgs e)
{
   if(FileUpload1.HasFile) 
   {
      string productName = txtProductName.Text;
      byte[] productImage = FileUpload1.FileBytes;

      string constr = "Server=TestServer; Database=SampleDB; uid=sa; pwd=abc123";
      string query = "INSERT INTO Products(ProductName, ProductImage) VALUES(@ProductName, @ProductImage)";

      SqlConnection con = new SqlConnection(constr);
      SqlCommand com = new SqlCommand(query, con);

      com.Parameters.Add("@ProductName", SqlDbType.NVarChar).Value = productName;
      com.Parameters.Add("@ProductImage", SqlDbType.VarBinary).Value = productImage; 

      con.Open();
      int result = com.ExecuteNonQuery();
      con.Close();

      if (result > 0)
      {
         lblMessage.Text = "Product Saved Successfully";
      }
   }
   else
   {
      lblMessage.Text = "Please Select Product Image File";
   }
}
The above code is running simple SQL Insert query to store images in database table. FileUpload controlHasFile property checks whether user has selected a file or not. FileBytes property returns the image file as the array of bytes.

If you want to upload the image file to a File System then you can also use FileUpload SaveAs method that requires the server path to upload the file. If you want to verify the file size and its type then you can use FileUpload.PostedFile.ContentLength and FileUpload.PostedFile.ContentType properties.