How to Save An Image Into the Database

Introduction

This article shows how to save an image into a database using a FileUpload control of ASP.NET.

To explain this article I will use the following procedure:

  1. Create a table in the database to store the image and some other relevant data by which I can fetch the image from the table.
  2. Create a website with a page that contains some controls like "textbox", "FileUpload" and "Button" in the design part of that page (.aspx).
  3. Write the code in the ".cs" file of that page to save the image in the database for the "button click" event.

The following are the detailed steps for the preceding procedure.

Step 1

Create a table named "Images" that will store the following:

  • Roll number of a student
  • Image of a student
  • Date of image insertion
  1. CREATE TABLE dbo.Images(  
  2.     Roll_no varchar(12) primary key,  
  3.     img varbinary(max) ,  
  4.     img_date datetime   
  5.     ) 

Create a table 

Step 2
  1. Create a new empty Website named "ImageToBinary".

    empty Website

  2. Add a new Page named "Conversion.aspx".

    Add a new Page

Step 3

  1. Add the following 3 controls to the page:

    • TextBox (For Roll number of student)
    • FileUpload (For selecting the image)
    • Button with Onclick event (For submit the image)
      1. Roll No.  
      2.        <asp:TextBox ID="txtrollno" runat="server">  
      3.        </asp:TextBox>  
      4.        <br />   
      5.       Select File  
      6.       <asp:FileUpload ID="FileUpload1" runat="server" />               
      7.        <br />   
      8.        <asp:Button ID="Button1" runat="server"  
      9.        Text="Convert" OnClick="Button1_Click" /> 
    Onclick event

  2. Write the code to insert the image into the database on the click event of the button.
    1.     protected void Button1_Click(object sender, EventArgs e)  
    2.     {          
    3.         if (!FileUpload1.HasFile) //Validation  
    4.         {  
    5.             Response.Write("No file Selected"); return;  
    6.         }  
    7.         else  
    8.         {  
    9.             string filename = FileUpload1.PostedFile.FileName;  
    10.   
    11.             //convert the image into the byte  
    12.             byte[] imageByte = System.IO.File.ReadAllBytes(filename);  
    13.   
    14.             //Insert the Data in the Table  
    15.             using (SqlConnection connection = new SqlConnection())  
    16.             {  
    17.  connection.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ToString();  
    18.                 
    19.   connection.Open();  
    20.                 SqlCommand cmd = new SqlCommand();  
    21.                 cmd.Connection = connection;  
    22.   
    23.   string commandText = "Insert into Images values (@Rollno,@image,getdate())";  
    24.   
    25.                 cmd.CommandText = commandText;  
    26.                 cmd.CommandType = CommandType.Text;  
    27.                 cmd.Parameters.Add("@image", SqlDbType.VarBinary);  
    28.                 cmd.Parameters["@image"].Value = imageByte;  
    29.                 cmd.Parameters.Add("@Rollno", SqlDbType.VarChar);  
    30.                 cmd.Parameters["@Rollno"].Value = txtrollno.Text;  
    31.                 cmd.ExecuteNonQuery();  
    32.                 cmd.Dispose();  
    33.                 connection.Close();  
    34.   
    35.                 Response.Write("Data has been Added");  
    36.             }  
    37.         }  
    38.     } 

  image into the database

Step 4
  1. Run the page that will be like:

    Run

  2. Fill in the roll number and click on the browse button to select the image.

    browse button

  3. After selecting the image.

    selecting the image

  4. Click on the Covert button to save the image.

    save the image

Result: Now you can see that the image has been saved in the database in binary format.

Result


Recommended Ebook

Hands on ASP.NET GridView

Download Now!
Similar Articles