I am not the guy who writes articles every other day, but fear not: I am planning to post further interesting Blogposts in the near future. For now, here is probably the biggest Script I've released as open-source: A MooTools based File-Manager for the web that allows you to (pre)view, upload and modify files and folders via the browser.

MooTools FileManager

Features

• Browse through Files and Folders on your Server
• Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
• View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
• Nice User Interface ;)
• Upload Files via FancyUpload (integrated Feature)
• Option to automatically resize big Images when uploading
• Use it to select a File anywhere you need to specify one inside your Application's Backend
• Use as a FileManager in TinyMCE
• Provides your Client with the most possible convenience ( ;D )

Demos

• FileManager + Simple Image Selection + Localized FileManager
• TinyMCE Integration

Download

• Download 1.0RC2

Integrate into your Application

The demos in the package provide a great overview on how to implement the FileManager. I have also packed two YUI-Compressed versions. One with every module + the English language file and another version containing all modules except the Uploader part.

Implementing the FileManager is really simple (once you added the CSS and JavaScript):

var manager = new FileManager({
  url: 'manager.php',
  assetBasePath: '../Assets',
  language: 'en',
  uploadAuthData: {session: 'MySessionId'}
});
$('example1').addEvent('click', manager.show.bind(manager));

The PHP-Code to implement the FileManager:

<?php
include('../Backend/FileManager.php');
$browser = new FileManager(array(
  'directory' => 'Files/',
  'assetBasePath' => '../Assets',
  'upload' => true,
  'destroy' => true,
));
$browser->fireEvent(!empty($_GET['event']) ? $_GET['event'] : null);

For more configuration options on either the client- or server-side please have a look at the Backend/FileManager.php file or the Source/FileManager.js file

Open Source

The FileManager is released under the MIT-License so I hope you have fun with it and you can get a great use out of it. Please, if you have space on your uber-cool Web-Application to add an acknowledgement and a link back to my Portfolio, I'd appreciate it a lot

Any subsequent releases until the 1.0 version of the FileManager will be "drop-in"-releases. This means no update will require you to change any line of your code.

If you want to help improve this FileManager, fix bugs, write documentation, write code for a backend in another language or simply implement features contact me, have a look at the Project on GitHub and fork me:

• http://github.com/cpojer/mootools-filemanager
• Issue Tracker

Browser Compatibility

The Script has been tested in Firefox 3+, Safari 4, Opera and IE6+. As this is an "RC" I expect it to have some minor glitches in some browsers (namely IE). There is no PNGfix whatsoever provided so if you desperately need one please implement it yourself. There is no warranty that the excessive use of the Uploader will crash your little Internet Explorer for no reason.

Acknowledgements

• This Script is loosely (!) based on a Filebrowser by Yannick Croissant: Brooser
• The FileManager makes use of the soon to be released FancyUpload 3.0 by Harald Kirschner. Thank you for your efforts, Harald!

The Uploader.js and the FancyUpload files are "drop-ins". Just add the ‹script /›-Tags to include the files and the upload button in the FileManager-Menu will appear. Please note that the Uploader integration will require MooTools 1.2.2 as the Class-System prior to it had some shortcomings.

Changes from 1.0RC1 to 1.0RC2

• There are now 8 Languages available for the FileManager: English, Spanish, French, German, Swedish, Finnish, Czech and Danish
• FancyUpload update, changed so it is possible to upload duplicates and some adjustments for the error messages when Flash is not available
• Adding a "hideOnClick" option to close the FileManager when the overlay is clicked
• You can now press enter in the input fields in the Rename/Create Dialogs and you can close any dialog by pressing the ESC-Key.
• Resetting the headline (h1) style so it doesn't destroy the style of the FileManager.
• Minor fixes in the back end