MooTools FileManager 1.3.4

A filemanager for the web based on MooTools that allows you to (pre)view, upload and modify files and folders via your browser.



  • 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 or CKEditor
  • Provides your client with the most possible convenience
  • Create galleries using the Gallery-Plugin
  • History and state management


  • sometimes "illegal character (Error #2038) mootools-core-1.3.js (line 5015)" when uploading multiple files


Christoph Pojer
Current version
GitHub Issues



  • _self_/_current_: Core/*
  • core/1.3.1: *
  • more/
    • Array.Extras
    • String.QueryString
    • Hash
    • Element.Delegation
    • Element.Measure
    • Fx.Scroll
    • Fx.SmoothScroll
    • Drag
    • Drag.Move
    • Assets
    • Tips

How to use


  • Open the "Demos/" folder and have fun


  • First you need to include the follwing scripts

    • Source/FileManager.js
    • Source/Uploader/Fx.ProgressBar.js
    • Source/Uploader/Swiff.Uploader.js
    • Source/Uploader.js
    • Source/Gallery.js (if you want to create a gallery, see example in the Demos/index.html)
    • Language/Language.en.js (or the language(s) do you need)
  • Then you need to modify the "Demos/manager.php" or "Demos/selectImage.php" to set up your upload folder etc

  • See the "Demos/index.html" for examples, but basically you need to do the following:

    var myFileManager = new FileManager({ url: 'path/to/the/manager.php', assetBasePath: '../Assets' });;

Configurable Options


  • url: (string) The base url to a file with an instance of the FileManager php class (FileManager.php), without QueryString
  • assetBasePath: (string) The path to all images and swf files used by the filemanager
  • directory: (string, relative to the directory set in to the filemanager php class) Can be used to load a subfolder instead of the base folder
  • language: (string, defaults to en) The language used for the FileManager
  • selectable: (boolean, defaults to false) If true, provides a button to select a file
  • destroy: (boolean, defaults to false) Whether to allow deletion of files or not
  • rename: (boolean, defaults to false) Whether to allow renaming of files or not
  • download: (boolean, defaults to false) Whether to allow downloading of files or not
  • createFolders: (boolean, defaults to false) Whether to allow creation of folders or not
  • filter: (string) If specified, it reduces the shown and upload-able filetypes to these mimtypes. possible options are
    • image: *.jpg; *.jpeg; *.bmp; *.gif; *.png
    • video: *.avi; *.flv; *.fli; *.movie; *.mpe; *.qt; *.viv; *.mkv; *.vivo; *.mov; *.mpeg; *.mpg; *.wmv; *.mp4
    • audio: *.aif; *.aifc; *.aiff; *.aif; *.au; *.mka; *.kar; *.mid; *.midi; *.mp2; *.mp3; *.mpga; *.ra; *.ram; *.rm; *.rpm; *.snd; *.wav; *.tsi
    • text: *.txt; *.rtf; *.rtx; *.html; *.htm; *.css; *.as; *.xml; *.tpl
    • application: *.ai; *.bin; *.ccad; *.class; *.cpt; *.dir; *.dms; *.drw; *.doc; *.dvi; *.dwg; *.eps; *.exe; *.gtar; *.gz; *.js; *.latex; *.lnk; *.lnk; *.oda; *.odt; *.ods; *.odp; *.odg; *.odc; *.odf; *.odb; *.odi; *.odm; *.ott; *.ots; *.otp; *.otg; *.pdf; *.php; *.pot; *.pps; *.ppt; *.ppz; *.pre; *.ps; *.rar; *.set; *.sh; *.skd; *.skm; *.smi; *.smil; *.spl; *.src; *.stl; *.swf; *.tar; *.tex; *.texi; *.texinfo; *.tsp; *.unv; *.vcd; *.vda; *.xlc; *.xll; *.xlm; *.xls; *.xlw; *.zip;
  • hideClose: (boolean, defaults to false) Whether to hide the close button in the right corner
  • hideOnClick: (boolean, defaults to false) When true, hides the FileManager when the area outside of it is clicked
  • hideOverlay: (boolean, defaults to false) When true, hides the background overlay

Options if Uploader is included

  • upload: (boolean, defaults to true)
  • uploadAuthData: (object) Data to be send with the GET-Request of an Upload as Flash ignores authenticated clients
  • resizeImages: (boolean, defaults to true) Whether to show the option to resize big images or not


  • onComplete(path, file): fired when a file gets selected via the "Select file" button
  • onModify(file): fired when a file gets renamed/deleted or modified in another way
  • onShow: fired when the FileManager opens
  • onHide: event fired when FileManager closes
  • onPreview: event fired when the user clicks an image in the preview


  • See Backend/FileManager.php for all available server-side options

Custom Authentication

  • As Flash and therefore the Uploader ignores authenticated clients you need to specify your own authentication. In order to do this you need to provide a custom "UploadIsAuthenticated" function on the serverside and you need to specify "uploadAuthData" on the client.


Loosely based on a Script by Yannick Croissant


A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus