Search code examples
c#asp.netasp.net-mvcasp.net-mvc-4filetree

How to display a filesystem tree to user be able to click and select a path?

Mates, after having a hard time trying to implement a class to enumerate the how filesystem tree I give up triyng to make it work.

I have a textbox with a filepath. I want the user to be able to click and from a panel displaying a filesystem tree it could click and select the path.

Could you guys help me with that.

Just for you understand what I was doing this is the code:

try
{
    DriveInfo[] allDrives = DriveInfo.GetDrives();

    Response.Write("<ul class=\"jqueryFileTree\" style=\"display: none;\">\n");

    foreach (DriveInfo drive in allDrives)
    {
        if (drive.IsReady == true)
        {
            try
            {
                Response.Write("\t<li class=\"drive collapsed\"><a href=\"#\" rel=\"" + drive.ToString() + "\">" + drive.ToString() + "</a>\n");

                System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(drive.ToString());
                DirectoryInfo[] directories = di.GetDirectories("*.*", SearchOption.AllDirectories);

                Response.Write("<ul>");

                foreach (System.IO.DirectoryInfo di_child in directories)
                {
                    Response.Write("\t<li class=\"directory collapsed\"><a href=\"#\" rel=\"" + drive + di_child.Name + "/\">" + di_child.Name + "</a>\n");
                    Response.Write("<ul>");

                    foreach (System.IO.FileInfo fi in di.GetFiles())
                    {
                        string ext = "";
                        if (fi.Extension.Length > 1)
                        {
                            ext = fi.Extension.Substring(1).ToLower();
                        }

                        Response.Write("\t<li class=\"file ext_" + ext + "\"><a href=\"#\" rel=\"" + drive + fi.Name + "\">" + fi.Name + "</a></li>\n");
                    }
                    Response.Write("</ul></li>");
                }
                Response.Write("</ul></li>");
            }
            catch (UnauthorizedAccessException e)
            {
                Response.Write(e.Message);
                continue;
            }
            catch (System.IO.DirectoryNotFoundException e)
            {
                Response.Write(e.Message);
                continue;
            }
            catch (Exception e)
            {
                Response.Write(e.Message);
                continue;
            }
        }
    }

    Response.Write("</ul>");
}
catch (Exception)
{
    throw;
}
Solution

  • The documentation for jqueryFileTree explains that you need to have a function that takes a POST parameter named dir and that your page should return an unordered list (ul) of the form:

    <ul class="jqueryFileTree" style="display: none;">
    <li class="directory collapsed"><a href="#" rel="/this/folder/">Folder Name</a></li>
    (additional folders here)
    <li class="file ext_txt"><a href="#" rel="/this/folder/filename.txt">filename.txt</a></li>
    (additional files here)
</ul>

    If you followed those instructions, you basically will need 2 pages: One that's entirely dedicated to produce the output above and one page to host the jQuery libraries needed for the jQueryFileTree plugin.

    So for example, you need a Default.aspx with a markup similar to this:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/jquery.js" type="text/javascript"></script>
    <script src="http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/jquery.easing.js" type="text/javascript"></script>
    <script src="http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/jqueryFileTree.js" type="text/javascript"></script>
    <link href="http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript">
        $(document).ready(function () {
            $.post('FileTree.aspx',{dir:'c:\\'}, function (data) {
                $('#filetree').html(data);
                $('.jqueryFileTree').fileTree({ root:'/' ,script: 'FileTree.aspx' }, function (file) {
                    alert(file);
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="filetree">

    </div>
    </form>
</body>
</html>

    Where on document.ready, you send a post request to a page called FileTree.aspx which is the one that will actually have the code to produce the desired ul>li properly styled as directories and files.

    The FileTree.aspx page should be completely empty but the code behind should be something like this:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request.Params["dir"] != null)
        {
            System.IO.DirectoryInfo di = new System.IO.DirectoryInfo(Path.Combine("c:\\", Request.Params["dir"]));
            if (di.Exists)
            {
                DirectoryInfo[] directories = di.GetDirectories("*.*", SearchOption.TopDirectoryOnly);
                Response.Write("<ul class=\"jqueryFileTree\" >\n");
                //Itera sobre os subdiretórios de cada driver
                foreach (System.IO.DirectoryInfo di_child in directories)
                {
                    Response.Write("\t<li class=\"directory collapsed\"><a href=\"#\" rel=\"" + di_child.Name + "/\">" + di_child.Name + "</a>\n");
                }
                foreach (System.IO.FileInfo fi in di.GetFiles())
                {
                    string ext = "";
                    if (fi.Extension.Length > 1)
                    {
                        ext = fi.Extension.Substring(1).ToLower();
                    }

                    Response.Write("\t<li class=\"file ext_" + ext + "\"><a href=\"#\" rel=\"" + fi.Name + "\">" + fi.Name + "</a></li>\n");
                }// Arquivos 
                Response.Write("</ul></li>");
            }
        }
    }

    So what ends up happening is that upon loading the Default.aspx page, you send an ajax request to the FileTree.aspx passing as parameter the root folder (c:\\ on my example) and upon further clicking on any of the folders rendered, the jQueryFileTree will continue to send ajax post requests to FileTree.aspx with the directory name selected.

    On my Particular implementation, the output produced is as follows:

    enter image description here

    Now, keep in mind that the above code will only work provided your web app runs under a user with enough privileges to read the file system which is not the case by default. You'd need to configure IIS for this.

    Also, note that the above code was heavily modified from your original version. I did this because you were attempting to load the entire file system and this is a very long, loooooooong operation. You'd normally want to load the top directories and only when each directory is clicked, then attempt to load its contents. Do not attempt to load everything at once or no one will want to use your app.

    Anyways, I hope this points you in the right direction...