Extension:FileSystemListing

Warning:

In addition to the XSS, it is probably a bad idea from a security prespective to allow randoms from the internet to get a directory listing of any arbitrary directory on your server

MediaWiki extensions manual - list

FileSystemListing Release status: stable
Implementation	Tag
Description	Provides an easy way to list filesystem contents on your webserver.
Author(s)	Javier Castro
Last version	1.0.0
License	GPL
Download	see below
Check usage and version matrix

The FileSystemListing extension provides an easy way to list filesystem contents on your webserver.

The initial intention was to easily map a link for each file provided for download on a website that uses MediaWiki as its backend, and render directory contents nicely inside an article called 'Downloads'.

The author hopes it will be useful, and also extended to provide more functionality

How to use

To use, simply put on your wiki page something like:

For the Files/Directorys list:
 <dirlist name="/var/www/html/downloads" fileprefix="" sort="true" encoded="false"></dirlist>
note:
 fileprefix="test/sub" // will link to /wiki/test/sub/filename
 encoded="true" // requires name in urlencoded format, e.g. /var/www/ftp/shared/%23B%20Buchf%FChrung (to allow htmlspecial char in filenames)

for the DateTime of an file :
<font color=red>'''<FsDateTime name="/var/www/html/downloads/DataCollector/Setup.2.0.exe">
</FsDateTime>'''</font>

The code

Here is the source code. If somebody has more time to see how can be added to the SVN repository, it'll be nice! See below for Modifications to the use of jQuery expansible tree

<?php
#
# Author: Javier Castro (jac) - javier.alejandro.castro@gmail.com
# Modifications to the use of jQuery expansible Tree: Max Friedrich (Maxgalileiconsult) - mfriedri@gc-ev.de
#
# This program is free software; you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation; either version 2 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License along
# with this program; if not, write to the Free Software Foundation, Inc.,
# 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
# http://www.gnu.org/copyleft/gpl.html

//Avoid unstubbing $wgParser on setHook() too early on modern (1.12+) MW versions, as per r35980
if ( defined( 'MW_SUPPORTS_PARSERFIRSTCALLINIT' ) ) {
        $wgHooks['ParserFirstCallInit'][] = 'wfListDirectory';
} else {
        $wgExtensionFunctions[] = 'wfListDirectory';
}
 
$wgExtensionCredits['parserhook'][] = array(
        'name' => 'FileSystemListing',
        'version' => '1.0.0',
        'author' => 'Javier Castro',
        'description' => 'Provides an easy way to list filesystem contents on your webserver with <tt>&lt;dirlist&gt;</tt> tag',
        'url' => 'http://www.mediawiki.org/wiki/Extension:FileSystemListing'
);
 
$wgResourceModules['ext.FileSystemListing'] = array(
    'scripts' => 'ext.FileSystemListing.js',
    'styles' => 'ext.FileSystemListing.css',
    'messages' => array(),
    'dependencies' => array(),
    'position' => 'bottom',
    'localBasePath' => dirname( __FILE__ ) . '/modules',
    'remoteExtPath' => 'FileSystemListing/modules'
);
 
function wfListDirectory() {
        global $wgParser;
        # register the extension with the WikiText parser
        # the first parameter is the name of the new tag.
        # In this case it defines the tag <dirlist> ... </dirlist>
        # the second parameter is the callback function for
        # processing the text between the tags
        $wgParser->setHook( 'dirlist', 'renderDirList' );
        $wgParser->setHook( 'FsDateTime', 'fsDT' );
        return true;
}
 
# The callback function for converting the input text to HTML output
function renderDirList( $input, $argv, $parser ) {
        $parser->disableCache();
        $dir = $argv['name'];
        if (array_key_exists('sort',$argv)) {
            $sort = $argv['sort'];
        }else{
            $sort = true;
        }
        $filePrefix = $argv['fileprefix'];
        if (array_key_exists('encoded',$argv)) {
            $encoded = $argv['encoded'];
        }else{
            $encoded = false;
        }
        # add jquery module for collapsing directory tree
        global  $wgOut;
        $wgOut->addModules( 'ext.FileSystemListing' );
        if ($dir !== "") {
                $result = readDirContents($dir,$sort,$encoded);
                $output = "";
                if($encoded) {
                    $dir = rawurldecode($dir);
                }
                $output .= renderDirContents($result, $dir, $filePrefix);
                return $output;
        }
        return "";
}
 
# The callback function for converting the input text to HTML output and return the date time of an file
function fsDT( $input, $argv, $parser ) {
        $parser->disableCache();
        $dir = $argv['name'];
        $filePrefix = $argv['fileprefix'];
        $fsdate = date ("d/m/Y H:i",filemtime($dir.$fileName));
        if ($dir !== "") {
                return $fsdate;
        }
        return "";
}
 
function renderDirContents($dirArray, $dirName, $prefix = null) {
        $output = "<ul class='mw-ext-FileSystemListing'>";
        foreach ($dirArray as $value) {
            if ($value['content'] !== null) {
                $output .= "<li>".utf8_encode($value['name'])."";
                $output .= renderDirContents($value['content'], $dirName, $prefix);
                $output .= "</li>";
            } else {
                        if ($prefix) {
                                $pathToFile = substr($value['path'], strlen($dirName));
                                $href = $prefix . str_replace('%2F','/',rawurlencode($pathToFile));
                                $output .= "<li><a href='$href'>".utf8_encode($value['name'])."</a></li>";
                        } else {
                                $output .= "<li>".utf8_encode($value['name'])."</li>";
                        }
            }
        }
        $output .= "</ul>";
        return $output;
}
 
function readDirContents($dir, $sort = true, $encoded=false) {
        if ($dir{strlen($dir)-1} !== '/')
                $dir .= '/';
        $a = array();
        if($encoded) {
            $dir = rawurldecode($dir);
        }
        $gd = opendir($dir);
        $i = 0;
        while (($fileName = readdir($gd)) !== false) {
        if ($fileName == "." || $fileName == "..")
                continue;
        if (is_dir($dir.$fileName))
                $a[$i++] = array("path" => $dir.$fileName, "name" => $fileName, "content" => readDirContents($dir.$fileName));
        else
                $a[$i++] = array("path" => $dir.$fileName, "name" => $fileName, "content" => null);
        }
        closedir($gd);
        if ($sort) {
                sort($a);
        }
        return $a;
}

Use with FCKEditor

I have noticed that FCKEditor alters some HTML tags as they are entered. This proved to be the case with the custom tag <dirlist dir="">, where the dir="" would be removed.

By replacing $dir = $argv['dir']; with $dir = $argv['name'];

in the function function renderDirList( $input, $argv ) above, FCKeditor allows the argument in the tag to be preserved.

Usage then changes to <dirlist name="path/to/directory"></dirlist>.

Using jQuery to build collapsable directory tree with icons

MediaWiki version:

1.19

Starting from http://homework.nwsnet.de/releases/ea21/#turn-nested-lists-into-a-collapsible-tree-with-jquery one may add a jquery feature to the extension. This Add-On gives the possibility to descent into the filestructure dynamically, compare Screenshot from http://homework.nwsnet.de/releases/ea21/jquery-tree.png .

Since jQuery is not integrated in <1.17, the following only tested in MediaWiki 1.19.

1. in your wiki installation, create the path extensions/FileSystemListing and place the full code above in some file FileSystemListing.php.
2. create further directories and the files

    extensions/FileSystemListing/modules/ext.FileSystemListing.css
    extensions/FileSystemListing/modules/ext.FileSystemListing.js
   

   and place the out-of-the-box icons folder.png and page.png from http://www.famfamfam.com/lab/icons/silk/ , published under Creative Commons Attribution 2.5 License, in

    wiki/extensions/FileSystemListing/modules/images/ 
   

3. next, you have to add code as needed and described by http://homework.nwsnet.de/releases/ea21/#turn-nested-lists-into-a-collapsible-tree-with-jquery . For the stylesheet, add

   /** extensions/FileSystemListing/modules/ext.FileSystemListing.css */
   ul.mw-ext-FileSystemListing {
       list-style: none; margin: 0; padding: 0;
   }
   ul.mw-ext-FileSystemListing li {
       background-image: url(images/page.png); background-position: 0 1px; background-repeat: no-repeat;
       padding-left: 20px;
   }
   ul.mw-ext-FileSystemListing li.folder {
       background-image: url(images/folder.png);
   }
    
   ul.mw-ext-FileSystemListing a {
       color: #000000; cursor: pointer; text-decoration: none;
   }
   ul.mw-ext-FileSystemListing a:hover {
       text-decoration: underline;
   }
   

4. and for the Javascript add

   /** extensions/FileSystemListing/modules/ext.FileSystemListing.js */
    
   // Execute this after the site is loaded.
   jQuery(document).ready(function ($) {
       // Find list items representing folders and
       // style them accordingly.  Also, turn them
       // into links that can expand/collapse the
       // tree leaf.
       $('li > ul').each(function (i) {
           // Find this list's parent list item.
           var parent_li = $(this).parent('li');
    
           // Style the list item as folder.
           parent_li.addClass('folder');
    
           // Temporarily remove the list from the
           // parent list item, wrap the remaining
           // text in an anchor, then reattach it.
           var sub_ul = $(this).remove();
           parent_li.wrapInner('<a>').find('a').click(function () {
               // Make the anchor toggle the leaf display.
               sub_ul.toggle();
           });
           parent_li.append(sub_ul);
       });
    
       // Hide all lists except the outermost.
       $('ul ul').hide();
   });
   

5. Finally, you have to modify the extension by writing some code to add the resource module. Modify the code above (the original extension), that you already saved in extensions/FileSystemListing/FileSystemListing.php, by adding the js/css files via the extra code

   $wgResourceModules['ext.FileSystemListing'] = array(
       'scripts' => 'ext.FileSystemListing.js',
       'styles' => 'ext.FileSystemListing.css',
       'position' => 'bottom',
       'localBasePath' => dirname( __FILE__ ) . '/modules',
       'remoteExtPath' => 'FileSystemListing/modules'
   );
   

   directly in the definitions part, e.g. before the function wfListDirectory() . Next, add the module via placing

           # add jquery module for collapsing directory tree
           global $wgOut;
           $wgOut->addModules( 'ext.FileSystemListing' );
   

   somewhere in the initializing code, that is, in function renderDirList(...) immediately at the beginning. May also be placed in a bit more global context, but this should reveal better performance if the extension is not embedded on every wiki site...

6. last, we have to fix some errors and "beauty aspects". Using non standard encoded file system requires minor changes as follows, but most important is that the javascript requires really nested uls, so we do best rewriting the whole:

   function renderDirContents($dirArray, $dirName, $prefix = null) {
           $output = "<ul class='mw-ext-FileSystemListing'>";
           foreach ($dirArray as $value) {
               if ($value['content'] !== null) {
                   # bugfixing above code, correct nestling the li and uls:
                   $output .= "<li>".utf8_encode($value['name'])."";
                   $output .= renderDirContents($value['content'], $dirName, $prefix);
                   $output .= "</li>";
               } else {
                   if ($prefix) {
                       $pathToFile = substr($value['path'], strlen($dirName));
                       $href = $prefix . str_replace('%2F','/',rawurlencode($pathToFile));
                       $output .= "<li><a href='$href'>".utf8_encode($value['name'])."</a></li>";
                   } else {
                       $output .= "<li>".utf8_encode($value['name'])."</li>";
                   }
               }
           }
           $output .= "</ul>";
           return $output;
   }
   

7. Enjoy! And, of course, don't forget to require_once( "$IP/extensions/FileSystemListing/FileSystemListing.php" ); the extension in your LocalSettings.php!