In this article I will explain with an example, how to upload and display Images in Repeater control in ASP.Net using C# and VB.Net.
The images will be uploaded and saved in a Folder (Directory) on Disk using ASP.Net FileUpload control using C# and VB.Net.
Later the Image files will be fetched from Folder (Directory) and display the same in ASP.Net Repeater using C# and VB.Net.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net Repeater control with an HTML Table Layout, an ASP.Net FileUpload control and a Button.
Note: For more information on displaying HTML Table Layout using Repeater control, please refer Repeater control Tutorial with example in ASP.Net using C# and VB.Net.
 
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<asp:Repeater ID="Repeater1" runat="server">
    <HeaderTemplate>
        <table cellspacing="0" rules="all" border="1">
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <%# Eval("Text") %>
            </td>
            <td>
                <asp:Image ImageUrl='<%# Eval("Value") %>' runat="server" />
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Collections.Generic;
 
VB.Net
Imports System.IO
Imports System.Collections.Generic
 
 
Uploading Images using ASP.Net FileUpload Control
When the Upload Button is clicked, the uploaded Image file is saved in the Folder (Directory) on Disk.
Note: If you need to learn about validation of files so that user can upload only Image files then please refer my article, ASP.Net FileUpload: File Extension Validation.
 
Finally, the Page is redirected to itself which will load the Image inside the Repeater control.
C#
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);
    }
}
 
VB.Net
Protected Sub Upload(sender As Object, e As EventArgs)
    If FileUpload1.HasFile Then
        Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
        FileUpload1.PostedFile.SaveAs(Server.MapPath("~/Images/") + fileName)
        Response.Redirect(Request.Url.AbsoluteUri)
    End If
End Sub
 
 
Displaying images from Folder (Directory) on Disk in ASP.Net Repeater
In the Page Load event, the Image files are fetched from the Images folder and using a For Loop, the URL of the Image files are added to the List Collection which is later used to populate (bind) the Repeater control.
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.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));
        }
        Repeater1.DataSource = files;
        Repeater1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim filePaths As String() = Directory.GetFiles(Server.MapPath("~/Images/"))
        Dim files As New List(Of ListItem)()
        For Each filePath As String In filePaths
            Dim fileName As String = Path.GetFileName(filePath)
            files.Add(New ListItem(fileName, "~/Images/" + fileName))
        Next
        Repeater1.DataSource = files
        Repeater1.DataBind()
    End If
End Sub
 
 
Screenshot
Upload and display Images in Repeater control in ASP.Net
 
 
Downloads
Download Code