.Apple Technologies: How to upload Images into Database and Retrieving Images from Database

Uploading Image into Database and Retrieving Image from Database

Introduction:

In my Previous articles I explained how to insert data, update data or delete data from gridview to database. In this article I explained how to upload image to database and how to retrieve image from database.

Description:

I have a contact table that contains all basic information of a person. Now if I want to update any information of that person including image I can use the following code to update all the information.

Procedure:

Step 1: First open sqlserver database and create a table with following fields and name it as contact

Step 2: Create a New Website, and add a NewItem (WebForm) and Name it as “UpdateProfile.aspx”.

Step 3 : Now Design the web page as shown below

Source

<tr>

 <asp:Label ID="Label2" runat="server"

Style="position: static; font-size: xx-large; color: #003399; font-weight: 700;" Text="Update Profile" Width="224px"></asp:Label> </td> </tr>

<tr>

</tr>

<tr>

<asp:Label ID="Label3" runat="server" Style="position: static" Text="First Name :"></asp:Label></td>

<asp:TextBox ID="tbfname" runat="server" Style="position: static" Height="24px"

Width="181px"></asp:TextBox></td>

<asp:Image ID="Image1" runat="server" Height="189px" Width="154px"

ImageUrl="~/customerimages/default.jpg" BorderStyle="Double" /> </td>

</tr>

<tr>

<asp:Label ID="Label4" runat="server" Style="position: static" Text="Last Name :"></asp:Label></td>

<asp:TextBox ID="tblname" runat="server" Style="position: static" Height="20px" Width="178px"></asp:TextBox></td>

</tr>

<tr>

<asp:Label ID="Label5" runat="server" Style="position: static" Text="Gender :"></asp:Label></td>

<td>

<asp:DropDownList ID="ddlgender" runat="server">

<asp:ListItem>Male</asp:ListItem>

<asp:ListItem>Female</asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr>

<asp:Label ID="Label6" runat="server" Style="position: static" Text="Email Address :"></asp:Label></td>

<td>

<asp:TextBox ID="tbemail" runat="server"

Style="position: static; margin-left: 0px;" Height="23px" Width="180px"></asp:TextBox></td>

</tr>

<tr>

<asp:Label ID="Label7" runat="server" Style="position: static" Text="City :"></asp:Label></td>

<td>

<asp:TextBox ID="tbcity" runat="server" Style="position: static" Height="23px"

Width="178px"></asp:TextBox></td>

</tr>

<tr>

<asp:Label ID="Label8" runat="server" Style="position: static" Text="State :"></asp:Label></td>

<td>

<asp:TextBox ID="tbstate" runat="server" Style="position: static" Height="22px"

Width="177px"></asp:TextBox></td>

</tr>

<tr>

<asp:Label ID="Label9" runat="server" Style="position: static" Text="Country :"></asp:Label></td>

<asp:TextBox ID="tbcountry" runat="server" Style="position: static"

Height="22px" Width="175px"></asp:TextBox></td>

 </td>

</tr>

<tr>

<asp:Label ID="Label10" runat="server" Style="position: static" Text="Mobile no :"></asp:Label></td>

<td>

<asp:TextBox ID="tbmobile" runat="server" Style="position: static"

Height="25px" Width="177px"></asp:TextBox></td>

<asp:FileUpload ID="FileUpload1" runat="server" Height="16px" Width="201px" />

</td>

</tr>

<tr>

</td>

<td>

</td>

 </td>

</tr>

<tr>

<br />

<asp:ImageButton ID="imgupdatebtn" runat="server" Height="43px"

ImageUrl="~/images/update[1].jpg" onclick="imgupdatebtn_Click" Width="140px" />

<asp:ImageButton ID="imguploadbtn" runat="server" Height="43px"

ImageUrl="~/images/uploadimg.jpg" onclick="imguploadbtn_Click" Width="140px" />

</td>

</tr>

<tr>

<asp:Label ID="lblresult" runat="server"></asp:Label>

</td>

 </td>

</tr>

</table>

Step 4 :Goto the UpdateProfile.aspx.cs file and add the following Namespaces for maintenance of database with SqlServer.

· using System.Data;

· using System.Configuration;

· using System.Data.SqlClient;

Step 5 :Now open web.config file and add the following code in ConnectionStrings tab.

<add name="con" connectionString="Data Source=Hanu-PC;Initial Catalog=test;Integrated Security=True"

providerName="System.Data.SqlClient" />

</connectionStrings>

Step 6:Now define the connection information in the code page as shown below

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);

SqlDataAdapter da;

DataSet ds;

Step 7 : Now write the following code under PageLoad Event

protected void Page_Load(object sender, EventArgs e)
{
lblresult.Visible = false;
if (con.State == ConnectionState.Closed)
{
con.Open();
}

if (Page.IsPostBack != true)
{

GetCustProfile(3);
}

}
Note : Here 3 is the UserId of that person. In your project you can pass the id of which person details you want to View

Ex: GetCustProfile(Convert.ToInt32(Session["uid"])) like

Step 8 : Now define GetCustProfile(3 ) Method as

private void GetCustProfile(int uid)
{
da = new SqlDataAdapter("select fname,lname,gender,email,city,state,country,mobileno,imagepath from contact where uid=" + uid + " ", con);
ds = new DataSet();
da.Fill(ds, "contact");
if (ds.Tables.Count > 0 && ds.Tables["contact"].Rows.Count > 0)
{
tbfname.Text = ds.Tables["contact"].Rows[0][0].ToString();
tblname.Text = ds.Tables["contact"].Rows[0][1].ToString();
ddlgender.Text = ds.Tables["contact"].Rows[0][2].ToString();
tbemail.Text = ds.Tables["contact"].Rows[0][3].ToString();
tbcity.Text = ds.Tables["contact"].Rows[0][4].ToString();
tbstate.Text = ds.Tables["contact"].Rows[0][5].ToString();
tbcountry.Text = ds.Tables["contact"].Rows[0][6].ToString();
tbmobile.Text = ds.Tables["contact"].Rows[0][7].ToString();
if (ds.Tables["contact"].Rows[0][8].ToString() == null)
{
Image1.ImageUrl = "~/customerimages/default.jpg";
}
else
{
Image1.ImageUrl = ds.Tables["contact"].Rows[0][8].ToString();
}
}
}

Step 9:Now write the code for Upload Image Button click event

protected void imguploadbtn_Click(object sender, ImageClickEventArgs e)

{

if (FileUpload1.PostedFile.ContentLength > 0 && FileUpload1.HasFile == true)

{

string filename = Guid.NewGuid().ToString().Substring(0, 10) + "" + FileUpload1.PostedFile.FileName.Remove(0, FileUpload1.PostedFile.FileName.LastIndexOf("."));

FileUpload1.SaveAs(Server.MapPath("~/customerimages/" + filename.ToString()));

string imgpath = "~/customerimages/" + filename.ToString();

Image1.ImageUrl = "~/customerimages/" + filename.ToString();

}

Step 7:Now Write the code for Update Image Button click event

protected void imgupdatebtn_Click(object sender, ImageClickEventArgs e)

{

if (con.State == ConnectionState.Closed)

{

con.Open();

}

string imgpath = Image1.ImageUrl;

da = new SqlDataAdapter("update contact set fname='" + tbfname.Text + "',lname='" + tblname.Text + "',gender='" + ddlgender.Text + "',email='" + tbemail.Text + "',city='" + tbcity.Text + "',state='" + tbstate.Text + "',country='" + tbcountry.Text + "',mobileno='" + tbmobile.Text + "',imagepath='" + imgpath + "' where uid=3" , con);

da.SelectCommand.ExecuteNonQuery();

GetArtistProfile(3);

lblresult.Visible = true;

lblresult.Text = "Update Successfull";

}

Step 8 : Now run the webpage. First the webpage will loads with original values of that uid person details

Step 9 : Now you can modify details as you like

Ex I want to change image, mail id, city and state first I clicks on choose file button and select an image which I want to store and clicks on Upload Button.

Step 10: Later I will modify the mail id, city and state text box values

Step 11 : Now I will clicks on Update button then my image, city, state and mail id values are changed and it will displayed in my profile page

Thank you for visiting this site. Please give feed back to me so that i can post most articles to you.

Pages

Tuesday 26 February 2013

How to upload Images into Database and Retrieving Images from Database

No comments:

Post a Comment