Click here to Skip to main content
11,502,559 members (66,914 online)
Click here to Skip to main content

Tagged as

Preview for Replacing Image Using GridView

, 30 Apr 2013 CPOL 3.4K 99 3
Rate this:
Please Sign up or sign in to vote.
Add/replace picture from web application with preview functionality.


The GridView control has a variety of functionalities. In this tip, I am going to use it as a preview container. Suppose you have an image folder in your web application and that image folder has pictures which are used for a slide show, or picture gallery, or slider, etc. Sometimes you require to add a new picture there or sometimes you want to replace the existing picture. For that, I have used a GridView control so that you can preview all the pictures of the images folder and replace if required.

Of course, you can add a new image as well. For that, there is a file upload control ID there. First of all, add an image folder to your web application as follows:

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 as follows in the source view:

<asp:FileUpload runat="server" ID="FupMain" />
 <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" />

Notice the following:

  • gridview has a property onrowcommand="GridView1_RowCommand".
  • Gridview has two item-templates, one for the image control and another for the fileupload and link button.

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

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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Comments and Discussions

-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 30 Apr 2013
Article Copyright 2013 by Brijesh Kr
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid