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" />

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

            Text="Add" />

        <br />

        <br />

        <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" />





        <asp:TemplateField HeaderText="Replace">


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





Note the following

GridView has a property,

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))



   //Gridview using dt as datasource

//adding all the names of files to a datatable


        dt = new DataTable();


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


            dr = dt.NewRow();

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







// 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;







// To add new image

    protected void Button1_Click(object sender, EventArgs e)


        if (FupMain.HasFile)



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