locked
Simple File broswer using Repeater RRS feed

  • Question

  • User-1653094129 posted

    Hi

    my snippet here is to build simple file browser , using repeater with two control

    1. LinkButton1 will used for directories
    2. LinkButton2 will used for files

    HTML
    	<asp:Repeater ID="Repeater1" runat="server">
    			
    			<ItemTemplate>
    				
            			<div class="col-md-2 " style="display:block;">
    						
    					<br />
    					
    						<asp:LinkButton ID="LinkButton1" runat="server" Visible="false" CommandName="open" CommandArgument="<%# Container.DataItem() %>" >
    						<i class="fa fa-folder fa-4x" aria-hidden="true"></i><br />
    							<span class="text-center"><%# Container.DataItem() %></span> 
    						
    							</asp:LinkButton>
    						<asp:LinkButton ID="LinkButton2" Visible="false" runat="server">
    							<i class="fa fa-file fa-4x" aria-hidden="true"></i><br />
    						<span class="text-center"><%# Container.DataItem() %></span> 
    
    						</asp:LinkButton>
    
    										
    				</div>
    				
    			</ItemTemplate>
    		</asp:Repeater>

    Page_Load
      Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
            If Not IsPostBack Then
    
    
                Repeater1.DataSource = ProcessDirectory(Server.MapPath("~/uploaded/"))
                Repeater1.DataBind()
    
            End If
    
        End Sub

    Repeater1_ItemCommand
       Private Sub Repeater1_ItemCommand(source As Object, e As RepeaterCommandEventArgs) Handles Repeater1.ItemCommand
            If e.CommandName = "open" Then
    
                Repeater1.DataSource = ProcessDirectory(e.CommandArgument)
                Repeater1.DataBind()
            End If
        End Sub

    Repeater1_ItemDataBound

     Private Sub Repeater1_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles Repeater1.ItemDataBound
            If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
    
                For Each item As Control In e.Item.Controls
                    If (System.IO.Directory.Exists(e.Item.DataItem)) Then
                        CType(e.Item.FindControl("LinkButton1"), LinkButton).Visible = True
    
                    End If
    
                    If System.IO.File.Exists(e.Item.DataItem) Then
                        CType(e.Item.FindControl("LinkButton2"), LinkButton).Visible = True
    
                    End If
    
    
                Next
            End If
    
        End Sub

    ProcessDirectory Function
     Public Function ProcessDirectory(ByVal targetDirectory As String) As List(Of String)
            Dim directories As New List(Of String)
            Dim files As New List(Of String)
            ' Process the list of files found in the directory.
            If System.IO.File.GetAttributes(targetDirectory) = System.IO.FileAttributes.Directory Then
    
                Dim subdirectoryEntries As String() = System.IO.Directory.GetDirectories(targetDirectory)
                ' Recurse into subdirectories of this directory.
                Dim subdirectory As String
                For Each subdirectory In subdirectoryEntries
                    directories.Add(subdirectory)
                Next subdirectory
            Else
    
                files = ProcessFile(targetDirectory)
    
            End If
    
    ' Here I tride to collect all data in single list for files and folders directories.AddRange(files) Return directories End Function 'ProcessDirectory

    ProcessFile Function
      Public Function ProcessFile(ByVal path As String) As List(Of String)
            Dim fileEntries As String() = System.IO.Directory.GetFiles(path)
            Dim files As New List(Of String)
            Dim fileName As String
            For Each fileName In fileEntries
                files.Add(fileName)
    
            Next fileName
    
            Return files
        End Function 'ProcessFile

    I have three issues in my logic

    1. It display full path of folders
    2. the files did not displayed
    3. It cannot display the suitable icon for each item i.e (folder icon for directory and file icon for files)
    4. here is my HTML

    any help will appreciated

    Thursday, July 6, 2017 11:23 AM

All replies

  • User-271186128 posted

    Hi MrDivx,

    • It display full path of folders
    • the files did not displayed
    • It cannot display the suitable icon for each item i.e (folder icon for directory and file icon for files)
    • here is my HTML

    According to your code and description, it seems that when click the directory button, you want to display the relevant files.

    I suggest you could refer to the following code: using nested repeater control to display the directory.

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
            <div>
                <asp:Repeater ID="Repeater1" OnItemCommand="Repeater1_ItemCommand" runat="server">
                    <HeaderTemplate>
                        <ul style="list-style: none">
                    </HeaderTemplate>
                    <ItemTemplate>
                        <li>
                            <asp:LinkButton ID="lblDirectories" CommandName="open" CommandArgument='<%# Eval("DirectoryPath") %>' runat="server">                            	
    							<span class="text-center glyphicon glyphicon-folder-open"> <%# Eval("DirectoryName") %></span> 
    						
                            </asp:LinkButton>
                            <asp:Repeater ID="Repeater2" runat="server">
                                <HeaderTemplate>
                                    <ul style="list-style: none">
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <li>
                                        <asp:LinkButton ID="lblFileName" CommandArgument='<%# Eval("FilePath") %>' runat="server">
    							    <span class="text-center glyphicon glyphicon-file"> <%# Eval("FileName") %></span> 
                                        </asp:LinkButton>
                                    </li>
                                </ItemTemplate>
                                <FooterTemplate>
                                    </ul>
                                </FooterTemplate>
                            </asp:Repeater>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
            </div>

    Code behind:

    Imports System.IO
    
    Public Class FileDirectory
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                Dim itemlist As List(Of DirectoryModel) = ProcessDirectory("~/UploadFiles")
                Repeater1.DataSource = itemlist
                Repeater1.DataBind()
            End If
        End Sub

    'load directories Protected Function ProcessDirectory(path As String) As List(Of DirectoryModel) Dim diclist As New List(Of DirectoryModel)() Dim di As New DirectoryInfo(Server.MapPath(path)) For Each dd As DirectoryInfo In di.GetDirectories() Dim dm As New DirectoryModel() dm.DirectoryName = dd.Name dm.DirectoryPath = (path & Convert.ToString("/")) + dd.Name diclist.Add(dm) Next Return diclist End Function

    'load files Protected Function ProcessFile(path__1 As String) As List(Of FileModel) Dim filelist As New List(Of FileModel)() For Each filepath As String In Directory.GetFiles(Server.MapPath(path__1)) Dim fm As New FileModel() fm.FilePath = (path__1 & Convert.ToString("/")) + Path.GetFileName(filepath) fm.FileName = Path.GetFileName(filepath) filelist.Add(fm) Next Return filelist End Function Protected Sub Repeater1_ItemCommand(source As Object, e As RepeaterCommandEventArgs) If e.CommandName = "open" Then Dim path As String = e.CommandArgument.ToString() Dim filelist As List(Of FileModel) = ProcessFile(path) Dim repeater2 As Repeater = DirectCast(e.Item.FindControl("Repeater2"), Repeater) repeater2.DataSource = filelist repeater2.DataBind() End If End Sub End Class Public Class DirectoryModel Public Property DirectoryPath() As String Get Return m_DirectoryPath End Get Set m_DirectoryPath = Value End Set End Property Private m_DirectoryPath As String Public Property DirectoryName() As String Get Return m_DirectoryName End Get Set m_DirectoryName = Value End Set End Property Private m_DirectoryName As String End Class Public Class FileModel Public Property FilePath() As String Get Return m_FilePath End Get Set m_FilePath = Value End Set End Property Private m_FilePath As String Public Property FileName() As String Get Return m_FileName End Get Set m_FileName = Value End Set End Property Private m_FileName As String End Class

    Then the screenshot as below:

    Best regards,
    Dillion

    Friday, July 7, 2017 8:17 AM
  • User-1653094129 posted

    Thank you for replay

    unfortunately this approach working fine for the root directories that have files and I cannot see the sub folders ,if there is no files in root directories it will not show the sub directories.

    I changed the Repeater1_ItemCommand sub to this

    Dim filelist As List(Of DirectoryModel) = ProcessDirectory  (path)

    So I neglect this

              '  Dim repeater2 As Repeater = CType(e.Item.FindControl("Repeater2"), Repeater)
    

     and change this

    Repeater1.DataSource = filelist
    Repeater1.DataBind()

    so Repeater1_ItemCommand after change will be

      Protected Sub Repeater1_ItemCommand(source As Object, e As RepeaterCommandEventArgs) Handles Repeater1.ItemCommand
            If e.CommandName = "open" Then
                Dim path As String = e.CommandArgument.ToString()
                Dim filelist As List(Of DirectoryModel) = ProcessDirectory  (path)
                'Dim repeater2 As Repeater = CType(e.Item.FindControl("Repeater2"), Repeater)
    
                Repeater1.DataSource = filelist
                Repeater1.DataBind()
            End If
        End Sub

    it show the directories very nice Of course I need to list any stored files in sub directories

    so with out change I got this  if and only if there is some files in the root directories

    after change I got this

    but my real physical files are like this 

    Friday, July 7, 2017 7:35 PM
  • User-271186128 posted

    Hi MrDivx,

    unfortunately this approach working fine for the root directories that have files and I cannot see the sub folders ,if there is no files in root directories it will not show the sub directories.

    If that is the case, I suggest you could use the TreeView control to do that, instead of using repeater control. Because, if using repeater control, we need to dynamically add the inner repeater control and attach the relevant event.

    Please refer to the following link to use TreeView control.

    https://www.aspsnippets.com/Articles/Display-Directory-Folder-structure-using-ASPNet-TreeView-control-in-C-and-VBNet.aspx

    Best regards,
    Dillion

    Tuesday, July 11, 2017 8:36 AM