Click here to Skip to main content
12,826,151 members (25,900 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


3 bookmarked
Posted 30 Apr 2013

Preview for Replacing Image Using GridView

, 30 Apr 2013 CPOL
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

You may also be interested in...


Comments and Discussions

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