Post
Ask Question

Save Image To The Database Using FileUpload In ASP.NET

We will save the name and path of the image to the database.

Initial chamber

Step 1: Open Visual Studio 2010 and create an empty website. Give it a suitable name: FileUpload_demo.

Step 2: In Solution Explorer you will get your empty website. Add a web form and SQL Database like the following:

For Web Form:

FileUpload_demo (Your Empty Website) - Right Click, Add New Item, then click Web Form. Name it Fileupload_demo.aspx.

Go back to your website in Solution Explorer and Add New Folder and Give name as - New Folder, then Upload.

folder

For SQL Server Database:

FileUpload_demo (Your Empty Website) - Right Click and Add New Item, then click SQL Server Database. Add Database inside the App_Data_folder.

Database chamber

Step 3: Go to your Database [Database.mdf], we will create a table - tbl_Data. Also, go to the database.mdf - Table and add new table, design your table like this:

Table - tbl_data ([Don’t forget to make ID, then Identity Specification as Yes).

table

Design chamber

Step 4: Open Fileupload_demo.aspx file to create our design, we will drag an HTML table, a FileUpload control,  button, label and a textbox.

Fileupload_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <style type="text/css">  
  9.         .style1  
  10.         {  
  11.             width: 283px;  
  12.         }  
  13.         .style2  
  14.         {  
  15.             width: 247px;  
  16.         }  
  17.     </style>  
  18. </head>  
  19. <body>  
  20.     <form id="form1" runat="server">  
  21.     <div>  
  22.       
  23.         <table style="width:100%;">  
  24.             <tr>  
  25.                 <td class="style1">  
  26.                     Image Name:</td>  
  27.                 <td class="style2">  
  28.                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  29.                 </td>  
  30.                 <td>  
  31.                      </td>  
  32.             </tr>  
  33.             <tr>  
  34.                 <td class="style1">  
  35.                     Upload Your Image:</td>  
  36.                 <td class="style2">  
  37.                     <asp:FileUpload ID="FileUpload1" runat="server" />  
  38.                 </td>  
  39.                 <td>  
  40.                     <asp:Label ID="Label1" runat="server"></asp:Label>  
  41.                 </td>  
  42.             </tr>  
  43.             <tr>  
  44.                 <td class="style1">  
  45.                      </td>  
  46.                 <td class="style2">  
  47.                     <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" />  
  48.                 </td>  
  49.                 <td>  
  50.                      </td>  
  51.             </tr>  
  52.         </table>  
  53.       
  54.     </div>  
  55.     </form>  
  56. </body>  
  57. </html>  
Your design looks like the following image:

Design

Code chamber

Step 5: Open Fileupload_demo.aspx.cs file to write code for saving the image to database.

Fileupload_demo.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.IO;  
  8. using System.Data;  
  9. using System.Data.SqlClient;  
  10.   
  11. public partial class _Default : System.Web.UI.Page  
  12. {  
  13.     protected void Page_Load(object sender, EventArgs e)  
  14.     {  
  15.   
  16.     }  
  17.     protected void Button1_Click(object sender, EventArgs e)  
  18.     {  
  19.         if (FileUpload1.HasFile)  
  20.         {  
  21.             string str = FileUpload1.FileName;  
  22.             FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Upload/" + str));  
  23.             string Image = "~/Upload/" + str.ToString();         
  24.             string name = TextBox1.Text;  
  25.   
  26.             SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  27.             SqlCommand cmd = new SqlCommand("insert into tbl_data values(@name,@Image)", con);  
  28.             cmd.Parameters.AddWithValue("@name", name);  
  29.             cmd.Parameters.AddWithValue("Image", Image);  
  30.   
  31.             con.Open();  
  32.             cmd.ExecuteNonQuery();  
  33.             con.Close();  
  34.   
  35.             Label1.Text = "Image Uploaded";  
  36.             Label1.ForeColor = System.Drawing.Color.ForestGreen;  
  37.   
  38.         }  
  39.   
  40.         else  
  41.         {  
  42.             Label1.Text = "Please Upload your Image";  
  43.             Label1.ForeColor = System.Drawing.Color.Red;  
  44.         }  
  45.     }  
  46. }  
Output chamber

upload image

Output

Hope you liked it. Have a good day. Thank you for reading.

 


Similar Articles