files-and-folders (FnF)

Become a master of file management with "Files and Folders" (FnF). FnF is an orthodox browser based file manager for Mac OS X, Windows and Linux.

The server component based on Node.js, the client component on AngularJS.

It's an early version! Tested on Windows 7 and Mac OS X. Documentation will be expanded and new features will be added.

Main features of FnF:

• Cross-platform (Frontend: browser, Backend: node.js)
• Orthodox file managers (two-panel directory view with a command line below)
• Tabbed interface
• All operations working in queues
• Multi-rename tool (Batch rename, apply filename changes to a group of files simultaneously)
• Multi-group tool (Arranging and Grouping files, moving files to folders)
• Directory history for changing back to recently viewed directories.
• Configurable extensions menu to start external programs
• User definable colors
• User definable keyboard shortcuts
• File List Filtering: Quickly filter a list of files by name, extension, or kind.
• Smart Sorting: Sort by folders, packages, or files first.
• Work with your files side-by-side in a customizable Dual Pane View and enjoy Full Keyboard Navigation.
• Access frequently used files and folders with Bookmarks and Tab Presets.
• View and manipulate hidden files.
• Application Launcher: Access your apps with the press of a key.
• Copy Names or Path of selected files and folders as text or json to clipboard.
• Open a terminal window with active folder ("New Terminal Here")
• Much more

Note

This software serves me as a sandbox to try out new technologies like WebSockets, css custom properties and so on. Therefore, the use of the latest browser is required (see caniuse).

Installation

Create an empty folder. Open your shell (console) and navigate to this folder. Enter:

npm i files-and-folders

A directory named node_modules is created with some sub folders. Navigate to node_modules/files-and-folders Enter:

cd node_modules/files-and-folders

Start app with:

node demo.app.js

In case of an error have a look at clientRoot: __dirname + '/../files-and-folders-client/release'.

Usage

Edit and call the demo app:

(function () {
 
  "use strict";
 
  var fnf = require('files-and-folders-server');
  var open = require('open');
 
  var port = 3002;
 
  console.info('app / __dirname :', __dirname);
  fnf.start({
    // auth: require('./demo.auth.js'), // optional
    clientRoot: __dirname + '/node_modules/files-and-folders-client/release',
    port: port
  });
 
  var url = 'http://localhost:' + port + '/';
  open(url);
 
})();

You can set an auth module, see demo.auth.js.

Customizing

User definable colors:

A color customizing dialog will be added. At the moment you can change an existing color scheme (or add a new one) by editing the json files in the folder ./node_modules/files-and-folders-server/config/color/. In browser click on the last button (pencil icon) to open the color menu and select a color scheme. The colors changes immediately. This state will be saved (see ./node_modules/files-and-folders-server/temp/). This means, after page reload you will get the last (saved) state.

The user can create new color schemes with real time preview:

The user can choose between three predefined color schemes:

Light:

Dark:

Blackboard:

User definable keyboard shortcuts:

Speed up your workflow by relying less on the mouse. Create a custom list of keyboard shortcuts using various action keys.

A keyboard shortcut customizing dialog will be added. At the moment you can change the shortcuts by editing the json files in the folder ./node_modules/files-and-folders-server/config/shortcut/. There is a file with one of these names: osx.json, windows.json and linux.json. The used file depends on your operating system.

In these json files you can map a shortcut with an action id. You can add more than one shortcut to an action id. The action ids should be self explained. Shortcuts are expained here: Keypress by David Mauro.

File Operations / Functions

All file operations can be done on selected items (seleted files/folders in a file panel view or found file/folders after a search).

• Copy
• Move
• Create Dir
• Delete
• Find
• Change Dir (Tree
• Rename
• Multi Rename
• Group Files
• Delete Empty Folders
• Copy names to clipboard
• External Tools / CMD Shell
• Go to anything

Copy

Copies selected items (file and/or folders) to a new target folder.

Move

Moves selected items to a new folder.

Create Dir

Creates a single sub directory.

Delete

Delete selected items.

Find

Finds files or directories.

Rename

Rename a single file or directory.

Multi Rename

Multi rename tons of files with patterns or predefined makros.

Group Files

Moving files to (new) folders. Folder name is derived from file name. Files with running numbers will be moved to one folder. User can specify algorithm in a dialog. A preview is shown before operation starts.

Delete Empty Folders

Delete all empty folder recursive.

Copy names to clipboard

Copy names of selected items to clipboard in different styles (tab separated or JSON array).

External Tools / CMD Shell

External tools can be defined in a config file. These tools are external commands. Predfined: CMD Shell, Edit and Reveal in Finder (Mac).

Change Dir (Tree

Opens a dialog with a list of sub directories.

Go to anything

A small dialog with auto completion allows the user to enter commands.

Related projects

• angular-filemanager
• extplorer
• simogeo filemanager
• elFinder
• Double Commander
• muCommander
• mootools-filemanager
• Responsive Filemanager
• Filemanager para Laravel 5

More infos coming soon...