jQuery File Commander

This article is also available in the following languages:
By Quess
A CakePHP 1.2.6 plugin which allow you to manage your server files similar to Total Commander.

Description

jQuery File Commander front end is build with jQuery 1.4.1, it generate two panels with files and allows to make basic operations on them like copy, move, rename which are run on server files. As a server base I create a controller and component which servs all operations called by JFC (it's also very easy to make JFC working with any other server side technology like python, ruby and more).

Available shortcuts (v0.3)

Navigation keys

  1. space - file/folder selection
  2. backspace - folder up
  3. pgup, pgdown - scroll page up, down
  4. home, end - to begining, end of file list
  5. up, down - move cursor up, down
  6. tab, left, right - move cursor between panels

Operation keys

  1. enter - open folder
  2. f5 - copy selected file(s)/folder(s)
  3. f6 - move selected file(s)/folder(s)
  4. shift+f6 - rename current file/folder
  5. del - delete selected file(s)/folder(s)
  6. f7 - create new folder
  7. f9 - reset path
  8. ctrl+R - reload current view

Navigation keys

  1. FireFox 3.0.x - ok
  2. Chrome 4.0.x - ok
  3. IE 8 - use shift+f5 instead of F5


Installation

Just copy the content of archive file to your application and you are ready.


Configuration

In fc/controllers/fc_controller.php there is a variable

public $pathToFiles = WWW_ROOT;
Here you can point to the folder where you want to manage your files.
There is also more paramaters you can set when creating JFC view. Please see example view which is located in fc/view/fc/index.ctp to see how to use them.


var options = {
    'imgPath':        "/fc/img/ext-ico/",
    'lsPath':        "/fc/fc/ajax_ls",
    'copyPath':        "/fc/fc/ajax_copy",
    'movePath':        "/fc/fc/ajax_move",
    'delPath':        "/fc/fc/ajax_del",
    'renPath':        "/fc/fc/ajax_ren",
    'mkdirPath':    "/fc/fc/ajax_mkdir",
    'height':        400,
    'leftPath':        '/',
    'rightPath':    '/'
};

var fc = new FC('#fc', options);
$(document).bind('keydown', function(event){
    fc.keyDown(event);
});

Short parameters description:
  1. leftPath, rightPath - folder path for every panel (if paths are not given then panel start with last visited saved in cookies),
  2. height - panels height in pixels
  3. imgPath - path to files icons

Rest of the parameters allow to configure AJAX paths which are called for files operations like lsPath, copyPath, movePath, delPath, renPath, mkdirPath.

Demo and download

For the latest demo and sources please visit http://blog.niepokoj.com/en/cakephp/jquery-file-commander
For demo direct url http://fc-demo.niepokoj.com/fc

Comments

  • Posted 01/27/11 02:18:44 AM
    it's a good idea to post this information, in this way, readers will be able to understand a lot about CakePHP. keep on posting articles like this.

    internet games

Comments are closed for articles over a year old