Image Uploading Issue

Posted by Raj.Trivedi under ASP.NET on 8/8/2013 | Points: 10 | Views : 1228 | Status : [Member] [MVP] | Replies : 4
Hello Team,

I have a folder named Images and i am uploading the images to a folder and storing just the name of the image with extension in the database.

Now i want to bind that image to an Image Control on a Page not inside a Grid View or data list i am just using a Image Control.

I tried using ImageUrl = Path.Combine(Server.Mappath("~/Images"),ds.tables[0].Rows[0]["ImageName"].toString());

But it is not giving me the Image Display

I also tries using Eval directly in HTML Mark up

Like ImageUrl=ProductImages/'<%#Eval("ImageName"))%>'

None of them are working

To Summarise, I want to bind the Image to a Image a Control where the name of the image is stored in the database and the image is in folder.

Regard's
Raj.Trivedi
"Sharing is Caring"
Please mark as answer if your Query is resolved



Responses

Posted by: Satyapriyanayak on: 8/9/2013 [Member] [MVP] Silver | Points: 25

Up
0
Down
http://www.c-sharpcorner.com/uploadfile/17e8f6/inserting-and-reading-image-tofrom-database-in-Asp-Net-web-application-in-image-control/

If this post helps you mark it as answer
Thanks

Raj.Trivedi, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bandi on: 8/12/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
Refer these two links for understanding inserting image path into database & image into a folder and displaying image using ASP .NET
http://www.aspdotnet-suresh.com/2011/01/how-to-insert-images-into-database-and.html
http://www.aspdotnet-suresh.com/2011/03/how-to-save-images-into-folder-and.html

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Raj.Trivedi, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bandi on: 8/12/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
//Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Inserting images into databse and displaying images with gridview</title>
<style type="text/css">
.Gridview
{
font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;
width:500px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvImages" CssClass="Gridview" runat="server" AutoGenerateColumns="False"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="white">
<Columns>
<asp:BoundField HeaderText = "Image Name" DataField="imagename" />
<asp:TemplateField HeaderText="Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>' Height="150px" Width="150px"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>


//Default.cs
using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;

namespace WebApplication1
{
public partial class Default : System.Web.UI.Page
{
string strcon = ConfigurationManager.ConnectionStrings["dbConnStrings"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData();
}
}

/// <summary>
/// function is used to bind gridview
/// </summary>
private void BindGridData()
{
SqlConnection connection = new SqlConnection(strcon);
SqlCommand command = new SqlCommand("SELECT imagename,ImageID from ImageUpload", connection);
SqlDataAdapter daimages = new SqlDataAdapter(command);
DataTable dt = new DataTable();
daimages.Fill(dt);
gvImages.DataSource = dt;
gvImages.DataBind();
gvImages.Attributes.Add("bordercolor", "black");
}
}
}


--ASP .NET Web Handler
using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;

namespace WebApplication1
{
/// <summary>
/// Summary description for ImageHandler
/// </summary>
public class ImageHandler : IHttpHandler
{
string strcon = ConfigurationManager.AppSettings["dbConnStrings"].ToString();
public void ProcessRequest(HttpContext context)
{
string imageid = context.Request.QueryString["ImID"];
SqlConnection connection = new SqlConnection(strcon);
connection.Open();
SqlCommand command = new SqlCommand("SELECT Image from ImageUpload where ImageID=" + imageid, connection);
SqlDataReader dr = command.ExecuteReader();
dr.Read();
Note: Continuation code will be available in the next post

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Raj.Trivedi, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Bandi on: 8/12/2013 [Member] [MVP] Platinum | Points: 25

Up
0
Down
Continue from above code
            context.Response.BinaryWrite((Byte[])dr[0]);

connection.Close();
context.Response.End();
}

public bool IsReusable
{
get
{
return false;
}
}
}
}


--Image into Folder
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageintoFolder.aspx.cs" Inherits="WebApplication1.ImageintoFolder" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Save Images In Folder and Display Images in Gridview from folder</title>
<style type="text/css">
.Gridview
{
font-family:Verdana;
font-size:10pt;
font-weight:normal;
color:black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileuploadimages" runat="server" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" onclick="btnSubmit_Click" />
</div>
<div>
<asp:GridView runat="server" ID="gvImages" AutoGenerateColumns="false" DataSourceID="sqldataImages" CssClass="Gridview" HeaderStyle-BackColor="#61A6F8" >
<Columns>
<asp:BoundField DataField="ImageId" HeaderText="ID" />
<asp:BoundField DataField="ImageName" HeaderText="Image Name" />
<asp:ImageField HeaderText="Image" DataImageUrlField="Image" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sqldataImages" runat="server" ConnectionString="<%$ConnectionStrings:dbConnStrings %>"
SelectCommand="select * from ImageUpload" >
</asp:SqlDataSource>
</div>
</form>
</body>
</html>


-- Image into Folder .cs
using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.IO;
using System.Configuration;

namespace WebApplication1
{
public partial class ImageintoFolder : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnSubmit_Click(object sender, EventArgs e)
{
//Get Filename from fileupload control
string filename = Path.GetFileName(fileuploadimages.PostedFile.FileName);
//Save images into Images folder
fileuploadimages.SaveAs(Server.MapPath("Images/" + filename));
//Getting dbconnection from web.config connectionstring
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConnStrings"].ToString());
//Open the database connection
con.Open();
//Query to insert images path and name into database
SqlCommand cmd = new SqlCommand("Insert into ImageUpload(ImageName,Image) values(@ImageName,@ImagePath)", con);
//Passing parameters to query
cmd.Parameters.AddWithValue("@ImageName", filename);
cmd.Parameters.AddWithValue("@ImagePath", "Images/" + filename);
cmd.ExecuteNonQuery();
//Close dbconnection
con.Close();
Response.Redirect("~/Default.aspx");
}
}
}


web.config:
<connectionStrings>

<add name="dbConnStrings" connectionString="Data Source=ServerName; Initial Catalog=DBName; User Id=UserName; Password=pwd" />
</connectionStrings>



Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Raj.Trivedi, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response