Logo
Welcome Smartik
Profile Logout
File Explorer
Data Tables Dialogs & Alerts

File Explorer

How to create a File Explorer?

1. Initialize the plugin

jQuery().ready(function() {
	jQuery('#finder').elfinder({
		
		// Options here....
		
	})
});

2. Define Options


jQuery().ready(function() {
	jQuery('#finder').elfinder({
	
		url : 'plugins/fileexplorer/connectors/php/connector.html', //PHP Connector  !!! The only required option
		lang : 'en' // Language
		
	})
});

3. Create a new DIV with ID "finder"



	<div id="finder"></div>


4. It is optimized to become a part of a "box". So, include this div in a "box".



<section class="grid_12">
	<div class="box">
		<div class="title"><span class="icon16_sprite i_folder"></span>File explorer</div>
		
		<div class="inside">
												
			<!-- File explorer --><div id="finder">finder</div><!-- /File explorer -->							
			<div class="clear"></div>
			
		</div>
		
	</div>
</section>
<div class="clear"></div>


The result of the code above:
File explorer
finder
Options
OPTION TYPE / VALUE DESCRIPTION
url String connector URL. The only required option
lang String Interface language. Require to include file js/i18n/elfinder.LANG.js, where LANG is two-letter language code, for example ru
cssClass String Additional CSS class for container
wrap Integer Number of symbols to show in a row when splitting long filenames in "icons" view. By default - 14. Do not split log filenames - 0
places String Folder name for "favorites". Can be localized. By default - Places. You can set this to empty string "" to disable "favorites"
placesFirst Boolean Place "favorites" before file tree in navigation panel. By default - true
editorCallback Function or null Callback function for WYSIWYG editor (CKEditor, TinyMCE, elRTE etc...). This function will get argument (String) - URL of selected file
cutURL String Cut string from the URL when calling editorCallback, to cut base url use special value root
closeOnEditorCallback Boolean Close elFinder after calling editorCallback? By default - true. (useless for CKEditor, TinyMCE)
view String Default directory view. Possible values: icons, list. By default - icons
width Integer or String Width of file manager. By default not set, but takes value from CSS file source:plugins/fileexplorer/css/elfinder.css
height Integer Height of file manager. By default not set, also can be set in CSS
disableShortcuts Boolean Disable shortcut keys (except arrows and space). By default - false
rememberLastDir Boolean Open last visited directory after page reload or after browser restart
cookie Object Set cookie (stores current view, last visited directory, "favorites"). By default - {expires : 30, domain : '', path : '/', secure : false}
toolbar Array Groups of icons in toolbar. By default - all available buttons/commands
contextmenu Object Contents of context menu. By default - all available commands
dialog Object jQueryUI dialog options with which elFinder will be opened. If docked == true - elFinder will be opened with "undock" feature (make it dialog window)
docked Boolean Allow "undock" feature (can be refered in docks as "docked mode")
autoReload Integer Amount of munites after which to update current directory contents. By default - 0 (disabled)
Reference:
Data Tables Dialogs & Alerts