Reader Level:
ARTICLE

Uploading Images to Database Using ASP.NET C#

Posted by Vithal Wadje Articles | Web Development January 02, 2013
In this article I will explain how to upload the images to a database table using an ASP.Net C# Web application.
  • 4
  • 0
  • 84046
Download Files:
 

Background

I have often seen the question asking how to upload images to a database in ASP.Net C# but the question ends without a solution. So by considering the preceding requirement I decided to write this article especially focusing on beginners and those who want to learn how to upload Images to a database.

Now before creating the application, let us create a table named ImageTotable or whatever name you wish in a database to store the Uploaded image files in a database table having the following fields (shown in the following image):

imagetable.png

In the preceding table, the myphoto column name is used to store the image file and the name is used to store the comment or name which is given to the image.

I hope you have created the same type of table.

Now  let us start to create an application to upload image files step-by-step.

Now create the project  as:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
  2. "File" - "New Project" - "C#" - "Empty Project" (to avoid adding a master page).
  3. Give the project a name, such as  ImageUpload  or another as you wish and specify the location.
  4. Then right-click on Solution Explorer - "Add New Item" - Default.aspx page. 
  5. One File upload control, one  Button, one textbox, one label 
Then the  <form> section of the Default aspx page looks as in the following:
 

<form id="form1" runat="server">

    <div>  

   <table>

    <tr>

    <td> 

        Select Image 

        </td>

        <td>

        <asp:FileUpload ID="FileUpload1" runat="server"  />

        </td>

 

 <tr>

    <td> 

        Select Image 

        </td>

        <td>

        <asp:FileUpload ID="FileUpload1" runat="server"  />

        </td>

Album Name

        <td> 

        <asp:TextBox ID="TextBox1" runat="server"  />

        </td>

        <td>
 

               </td>

        </tr>
 

</table>

<table><tr><td><p><asp:Label ID="Label2" runat="server" Text="label"></asp:Label>  </p></td></tr></table>

 

    </div>

 </form>
 

Now switch to design mode and double-click on the Save button and use the following code to upload the Image files as:
 
 protected void Button1_Click(object sender, EventArgs e)
        {

 
            if ( ! FileUpload1.HasFile)
            {
                Label1.Visible = true;
                Label1.Text = "Please Select Image File";    //checking if file uploader has no file selected

 
            }
            else
            {
                int length = FileUpload1.PostedFile.ContentLength;
                byte[ ] pic =new byte[length];

 
                FileUpload1.PostedFile.InputStream.Read(pic, 0, length);
          
                try
                {
                    connection();     //calling connection method
//inserting uploaded image query
                    SqlCommand com = new SqlCommand("insert into ImageTotable "
                      + "(myphoto,name) values (@photo, @name)", con);
                    com.Parameters.AddWithValue("@photo", pic);
                    com.Parameters.AddWithValue("@name", TextBox1.Text);
                    com.ExecuteNonQuery();
                    Label1.Visible = true;
                    Label1.Text = "Image Uploaded Sucessfully";  //after Sucessfully uploaded image
                }
                finally
                {
                    con.Close();
                }
            }

 
Then run the page which will look as in the following:
 
demo.png

From the preceding view I am using one button to do the upload; one textbox to provide an album name.
 

Now run the application and click on the save button without selecting an Image file which shows the following error as shown in the following:
 

emptyfile.png
 

Now select the Image file, which shows the following message after being successfully uploaded:
 

final.png

 

Note 
  • For detailed code please download the zip file attached above.
  • Don't forget to update the Web.config file according to your Server location. 
Summary
 
Now we have learned how to upload images to a database. I hope this article is useful for all students and beginners. If you have any suggestion related to this article please contact me.

COMMENT USING

Trending up