Add and Replace Picture From Web Application With Preview Functionality

The GridView control has a variety of functionalities. In this article I use it as a preview container.

Suppose you have an image folder in your web application and that image folder has pictures for a slide show or picture gallery or slider etcetera.

You might need to add a new picture there or replace an existing picture.

For that I have used a GridView control so that you can preview all the pictures of the images folder and replace them if required.

Of course you can also add a new image; for that there is a file upload control id.

First of all add an image folder to your web application as in the following:

Controls on design

Now add a file-upload control and a button to add a new image.

Add a GridView control, your source code should look such as the followig in the source view:

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

<asp:Button ID="Button1" runat="server" onclick="Button1_Click"

Text="Add" />

<br />

<asp:GridView DataKeyNames="Name" AutoGenerateColumns="false" ID="GridView1"

DataSource='<%#dt %>' runat="server" onrowcommand="GridView1_RowCommand">

<asp:TemplateField HeaderText="Image">

<asp:Image ImageUrl='<%# "~/images/"+ Eval("Name") %>' runat="server" ID="img2" Height="100" Width="100" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Replace">

<asp:FileUpload runat="server" ID="fup" /> <asp:LinkButton CommandName="replace" runat="server" Text="Ok" ID="btnRep" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Note the following

GridView has a property, onrowcommand="GridView1_RowCommand".

GridView has two item-templates, one for image control and another for the fileupload and link buttons.

Server Side Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.IO;

public partial class _Default : System.Web.UI.Page

{

public string[] arr;

public DataTable dt;

public DataRow dr;

protected void Page_Load(object sender, EventArgs e)

{

// To get all the file names only of images directory

arr = Directory.GetFiles(Server.MapPath("~\\") + "images").Select(path => Path.GetFileName(path))

.ToArray();

//Gridview using dt as datasource

//adding all the names of files to a datatable

dt = new DataTable();

dt.Columns.Add("name");

for (int i = 0; i < arr.Length; i++)

{

dr = dt.NewRow();

dr["name"] = arr[i].ToString();

dt.Rows.Add(dr);

}

GridView1.DataBind();

}

// When you click OK after choosing a image to replace

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "replace")

{

//To get the specific row of gridview and then image name too

LinkButton btn = (LinkButton)e.CommandSource;

GridViewRow grow = (GridViewRow)btn.NamingContainer;

FileUpload fup1 = (FileUpload)grow.FindControl("fup");

string fileName = GridView1.DataKeys[grow.RowIndex].Value.ToString();

//Reaplacing image

if (fup1.HasFile)

{

string path = Server.MapPath("~/images/") + fileName;

fup1.SaveAs(path);

}

// To add new image

protected void Button1_Click(object sender, EventArgs e)

{

if (FupMain.HasFile)

{

string path = Server.MapPath("~/images/")+FupMain.FileName;

FupMain.SaveAs(path);

}