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

         <Columns>

        <asp:TemplateField HeaderText="Image">

        <ItemTemplate>

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

      

        </ItemTemplate>

        </asp:TemplateField>

       

        <asp:TemplateField HeaderText="Replace">

        <ItemTemplate>

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

           

        }

    }

}