List page folders (and files)

Hg El
Member since: 2013
 

Hi!

I'm about to create a page which should list the folders (containing files) that belongs to the page (Page folders and files). The list should simply consist of links to other pages which shows all the files in the selected folder. Editors are going to be able to create subfolders and upload files into these. Any new created subfolder should automaticly be added to the list (probably sorted alphabetically). Been searching around for a solution that simply lists all the folders (clickable links) that belong to the page. And as I previously explained... when you click the folder a list of the files in the folder should be shown. Any user should then be able to click on these files to download them. Kind of feels like there should be a solution for this out there. I would be very happy to see one... or maybe at least get some hints on how to go about this. Thanks in advance!

 

#65027 Jan 17, 2013 20:12
  • Johan Petersson
    Member since: 2007
     

    Hi, I would render all folders and files on the same page and then use a jQuery treeview plugin. Something like this:

    public partial class FileList : UserControlBase
    {
        const string DirectoryFormat = "<a class=\"folder\"><span>{0}</span></a>\r\n";
        const string FileFormat = "<li><a class=\"file {0}\" href=\"{1}\"><span>{2}</span> ({0}, {3})</a></li>\r\n";
    
        protected override void Render(HtmlTextWriter writer)
        {
            base.Render(writer);
    
            UnifiedDirectory root = CurrentPage.GetPageDirectory(true);
    
            if (root.QueryDistinctAccess(AccessLevel.Read))
            {
                writer.WriteLine("<ul class=\"file-list sitemap collapsable\">");
                writer.WriteLine("<li>");
    
                writer.Write(
                    DirectoryFormat,
                    HttpUtility.HtmlEncode(root.Name));
    
                ListDirectories(root, writer);
    
                writer.WriteLine("</li>");
                writer.WriteLine("</ul>");
            }
        }
    
        private void ListDirectories(UnifiedDirectory directory, HtmlTextWriter writer)
        {
            writer.WriteLine("<ul>");
    
            foreach (UnifiedDirectory subDirectory in directory.Directories)
            {
                if (subDirectory.QueryDistinctAccess(AccessLevel.Read))
                {
                    writer.WriteLine("<li class=\"collapse\">");
    
                    writer.Write(
                        DirectoryFormat,
                        HttpUtility.HtmlEncode(subDirectory.Name));
    
                    ListDirectories(subDirectory, writer);
    
                    writer.WriteLine("</li>");
                }
            }
    
            foreach (UnifiedFile file in directory.Files)
            {
                if (file.QueryDistinctAccess(AccessLevel.Read))
                {
                    writer.Write(
                        FileFormat,
                        file.Extension.Remove(0, 1),
                        HttpUtility.UrlPathEncode(file.VirtualPath),
                        HttpUtility.HtmlEncode(file.Name),
                        file.Length.ToFileSize());
                }
            }
    
            writer.WriteLine("</ul>");
        }
    }

        

    #65031 Jan 17, 2013 22:31
  • Hg El
    Member since: 2013
     

    Ah great! I shall give it a try... I'll get back once I run into problems :) Thanks...

    #65063 Jan 18, 2013 14:42
  • Hg El
    Member since: 2013
     

    I've managed to get the tree listing working okey but I'm having some problems with the URLs not leading to the files. Must have a closer look at my code and web.config. I shall also look into the jquery tree listing you mentioned... One thing I wonder though is how to skip showing/listing the top level (root directory - in my case 15375) first in the listing? Many thanks Johan!

    #65067 Jan 18, 2013 15:54
  • Hg El
    Member since: 2013
     

    Okey, now I've managed to get the whole thing working with JQuery Treeview and all (at home)... Great and many thanks for your advice! Files are linking correctly also. Must be some config or local enviroment thing thats wrong/weird at work. One thing that I ran into when importing the .js files (using ResolveUrl)... Everything compiled OK and worked as long as I was navigating but once I tried to login via util/login.aspx it kind of blew up in my face. I had to wrap the whole import in a contentplaceholder to avoid getting an error (when logging in). My question... Are there other (better) was of adding .js to the project?

    <asp:ContentPlaceHolder id="fixing"runat="server">

    <script src="<%= ResolveUrl("~/Templates/Scripts/Treeview/Lib/jquery.js") %>"type="text/javascript"></script>

    <script src="<%= ResolveUrl("~/Templates/Scripts/Treeview/Lib/jquery.cookie.js") %>"type="text/javascript"></script>

    <script src="<%= ResolveUrl("~/Templates/Scripts/Treeview/jquery.treeview.js") %>"type="text/javascript"></script>

    <script src="<%= ResolveUrl("~/Templates/Scripts/Treeview/demo.js") %>"type="text/javascript"></script>

    </asp:ContentPlaceHolder>

     

     

    #65082 Jan 19, 2013 12:11