C# ASP.NET: Image upload to a folder and bind with a Gridview -

In this tutorial we simply design a webform to upload images and a Gridview to bind our images and its name with that. To do this process I divided my tutorial in two simple parts first part for the design the webform and second one is the coding part in which we code for upload image and bind it with Gridview.

So, Without taking your valuable time let’s start…

Design a WebForm

Let’s create a WebForm with file upload and upload button and don’t forget to add a Gridview. There are two columns into my Gridview one is for the image name and other one is for image display. The code for the design is as follows:

<form id="form1" runat="server">

    <div>

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

        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />

        <hr />

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ShowHeader="false">

            <Columns>

                <asp:BoundField DataField="Text" />

                <asp:ImageField DataImageUrlField="Value" ControlStyle-Height="100" ControlStyle-Width="100" />

            </Columns>

        </asp:GridView>

    </div>

    </form>

Code behind the Webform

In the coding part we firstly code on the upload button. Before start writing code on the upload button don’t forget to add folder into your solution explorer named it as ‘Images’. This is that folder where your images will upload. The description of the code is as follows:

In the code start with creating a variable named as ‘fileName’. In this variable we will store the name of the image as a string.
After that we will give the path of the image to the folder that we have created previously and save it with file name.
Now Response.Redirect redirect you to the upload page.


    protected void Upload(object sender, EventArgs e)

    {

        if (FileUpload1.HasFile)

        {

            string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);

            FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);

            Response.Redirect(Request.Url.AbsoluteUri);

        }

    }

Now in the final stage we code within the page load function. In this section we have to bind our image that has uploaded. The code for binding image into Gridview is as follows:

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));

            List<ListItem> files = new List<ListItem>();

            foreach (string filePath in filePaths)

            {

                string fileName = Path.GetFileName(filePath);

                files.Add(new ListItem(fileName, "~/Images/" + fileName));

            }

            GridView1.DataSource = files;

            GridView1.DataBind();

        }

    }

Note: Don’t forget to use NameSpace: using System.IO;

Now your full code looks like follows:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;
 

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

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/"));

            List<ListItem> files = new List<ListItem>();

            foreach (string filePath in filePaths)

            {

                string fileName = Path.GetFileName(filePath);

                files.Add(new ListItem(fileName, "~/Images/" + fileName));

            }

            GridView1.DataSource = files;

            GridView1.DataBind();

        }

    }

    protected void Upload(object sender, EventArgs e)

    {

        if (FileUpload1.HasFile)

        {

            string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);

            FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName);

            Response.Redirect(Request.Url.AbsoluteUri);

        }

    }

}