Projects:FileBrowser

<< Back to Dashboard | << Projects Viewer

ColdBox FileBrowser Module

FileBrowser is a ColdBox Module that will enable file management capabilities in your applications.

Requirements

• ColdBox 3.1 and above
• ColdFusion 9 and above
• JQuery 1.4 and above

Videos

Installation

Download and drop in your modules directory

http://myapp.com/index.cfm/filebrowser

• http://coldbox.org/forgebox/view/filebrowser - Download
• https://github.com/ColdBox/depot-cbox-filebrowser - Source, Issues and more

Capabilities

So what can you do with FileBrowser?

• Upload files
• Download files
• Delete files/folders
• Rename files/folders
• Create folders
• Quick view files
• CKEditor Integration
• Widget Mode to place on Filebrowser any other page

FileBrowser Module Configuration

Let's open the module's configuration file ModuleConfig.cfc and see what we can modify in it. Look for the settings structure, this is the configuration structure for the FileBrowser module and you have some control over it. Below is the default configuration structure:

// FileBrowser Settings
settings = {
	// The title name for usage inline and the layout
	title = "ColdBox FileBrowser v#this.version#",
	// the directory root path to start the visualizer on, absolute path
	directoryRoot = expandPath("/#appMapping#"),
	// Secure the visualization or creation of stuff above the directory root or not
	traversalSecurity = true,
	// Show files on the visualizer or not
	showFiles = true,
	// Ability to create folders
	createFolders = true,
	// Ability to remove stuff
	deleteStuff = true,
	// Allow downloads
	allowDownload = true,
	// Allow uploads
	allowUploads = true,
	// CFFile Upload accepted mime types, blank means all.
	acceptMimeTypes = "",
	// Name filtering applies to both files and directories. This is also a regex
	nameFilter = ".*",
	// Extension filtering that applies to file extensions to display, matches the filter argument to directoryList()
	extensionFilter = "",
	// Image Name filtering applies to both files and directories. This is also a regex.  Where the filterType=image.
	imgNameFilter = "^((?!\.).)*$|.+\.(jpg|jpeg|bmp|gif|png)/? *",
	// Flash Name filtering applies to both files and directories. This is also a regex.  Where the filterType=flash.
	flashNameFilter = "^((?!\.).)*$|.+\.(swf|fla)/? *",
	// Volume Chooser, display the volume navigator
	volumeChooser = false,
	// Load jQuery
	loadJQuery = true,
	// Load Select Callback hooks
	loadSelectCallbacks = true,
	// Quick View image width in pixels
	quickViewWidth = 400,
	// Uploadify Settings
	uploadify = {
		fileDesc = "All Files",
		fileExt	 = "*.*;",
		multi 	 = true,
		sizeLimit = 0,
		customJSONOptions = ""
	}
};

FileBrowser Module Settings

And here are the settings that you can modify:

CKEditor Integration

Filebrowser has everything you need for integration with the CKEditor WYSIWYG editor.

To use Filebrowser with CKEditor you can do the following

Ensure you have the loadSelectCallbacks on

	settings = {
	...
	// Load Select Callback hooks
	loadSelectCallbacks = true,
	...
	}

And then add this to your ckeditor configuration

	$("#content").ckeditor( function(){}, {
			filebrowserBrowseUrl : '/index.cfm/filebrowser/?callBack=fbCKSelect',
			filebrowserImageBrowseUrl : '/index.cfm/filebrowser/?callBack=fbCKSelect&filterType=Image',
			filebrowserFlashBrowseUrl : '/index.cfm/filebrowser/?callBack=fbCKSelect&filterType=Flash'
	} );

That is it, you now have a browse button in your CKEditor to use that will launch Filebrowser for you and you can use it to manage your media.

Widget Mode

Use widget mode to embed on Filebrowser any other page using the ColdBox runEvent() function making a Viewlet.

When in widget mode, you can also define a settings structure to control the Filebrowser Widget's settings, effectivily overwritting the defaults and allowing you to have multiple versions with different settings.

Example

<cfoutput>
<div class="box clear">
	<---  Body Header --->
	<div class="header">
		Media Manager
	</div>
	<---  Body --->
	<div class="body">

	<---  messageBox --->
	#getPlugin("MessageBox").renderit()#
	<cfset settings = {directoryRoot=expandPath("/mymedia")} />
	<cfset args = {widget=true,settings=settings} />

	<---  FileBrowser Viewlet --->
	#runEvent(event='filebrowser:home.index',eventArguments=args)#

	</div>
</div>
</cfoutput>

In this example we placed the filebrowser on the page in the body div and passed a new directory root setting to start our visualizations on.