Making an Intranet File Browser for Drupal or WordPress

Technology Blog

I’ve recently worked on two projects that both asked for some code that would allow users to attach an intranet file (typically something like a Word document) to a post. There’s a few things that anyone trying to do the same will need to understand.

Browser security and links to files

The first thing is that the security features of modern browsers tend to get in the way when you are working on an intranet. Suppose you have an HTML page on which you want to have a link to some relevant document. Everyone who can access the page also has access to the document via a networked drive. Suppose for the sake of argument it’s at the path F:\docs\document.doc. Browsing to that path will reveal that this path is equivalent to the url file:///f:/docs/document.doc.

So the obvious thing would be to create a hyperlink to that url and add it to the page wouldn’t it? Simple. The only thing is, unless you are using a really old browser to access the page, it won’t work. Modern browsers won’t follow a file: link in a page that’s fetched with a url starting http: or https:.

Here’s a couple to try. If you are on windows, this link tries to open a file called c:\windows\system.ini. For mac and linux users here’s one to /etc/hosts instead.

Don’t worry about clicking on these links, nothing bad can happen: and if you are using a modern browser (such as Firefox 2 or 3 or Internet Explorer later than version 6) then nothing will happen at all.

While this is great for general web security as it prevents scripts on web pages from reading files on your PC – absolutely a Very Good Thing – the prospective intranet developer may be frustrated. There are ways round this limitation but they require you to adjust settings on every visiting browser. Not very practical in the corporate environment and liable to infringe company security policy.

So what can you do? The answer is very simple: serve such files via HTTP instead. Point your preferred web server at the networked file system, give it a virtual domain or directory and off you go. Now you can use HTTP hyperlinks to reference files and your browser will be perfectly happy.

Making it easy to link

OK, so it’s possible to put a link on a page and have it open a file when you click on it. But there’s still a problem for users. Say the file someone wants to link to is at F:\intranet\docs\several\folders\deep\document.doc. The equivalent URL might be http://docs.intranet.company.com/several/folders/deep/document.doc. That’s a long URL and easy to get wrong: how can we make it easier for them?

The precise solution is going to depend on local requirements and which platform is in use, but I think it’s possible to outline a general approach. What we’ll want is something which will allow the user to browse through the filesystem via the web server and select a file. The output from this process will be a file URL that can then be displayed as a hyperlink by some means we won’t discuss further here (except to say that I do have the code for a Drupal CCK widget that works this way, if anyone is interested).

Before it can be used, the software will have to know two things: the path to the root directory where the files are kept, and the equivalent URL of this directory. In our example, these might be F:\intranet\docs\ and http://docs.intranet.company.com/. So these two values will need to be configured into the software by some means. This configuration step could also be used to specify directories to keep hidden, which file types to show and so on.

Let us assume that the software is correctly set up and a user is now editing a post. Somewhere on the panel in front of them there is a button which invokes the software. When they click on it, a popup appears with a tree view of files and directories from the root folder. They can navigate through the tree until they find the file they want, select it, and return to editing, where that file has been added to their item.

I chose to use a pure Javascript solution, specifically the jstree plugin, to render the tree. The tree is populated via AJAX, with a callback returning a list of each directory opened as the user clicks down the hierarchy. The popup ‘window’ is actually an IFRAME with a sem-transparent background, positioned to cover the entire current page to give the effect of a modal dialogue.

Conclusions

By combining off-the-shelf components with a modest amount of custom code it’s possible to create a slick, easy-to-use, file browser ideal for intranet and similar applications.

Figure W specialise in the development of widgets and modules for WordPress and Drupal. Call us on +447783 386951 or use our contact form to discuss your requirements.

3 Responses to “Making an Intranet File Browser for Drupal or WordPress”

  1. Dave

    Hi, did you ever make that CCK field module available? I would love to use this.

  2. Andrew

    I’d also be interested in taking a look at the Drupal CCK widget. Any chance you could share it?

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>