Skip to content

Configuration options

pavel edited this page Mar 17, 2018 · 31 revisions

Since v2.0.0 RichFilemanager configuration options divided into two files: client-side and server-side. The separation was done for the security reasons and also to provide an ability to setup client-side code as a standalone application, making it independent of the location of server-side connector scripts. According to this approach you could move connector scripts outside web folder or even keep the client-side application and connector scripts on different servers. To make it possible you have to setup the api section of the client-side configuration file.

Server-side configuration

SERVER-side configuration file is specific for each connector. Moreover some connectors, like PHP, have multiple config files - for each storage.

For connectors which are designed as standalone packages and located at separate repositories you have to check repository ReadMe.md file or wiki section to get detailed information about configuration file(s) location and extensive description:

For connectors which are part of RichFilemanager package (built-in):

None of built-in connectors provides standalone configuration file at the moment. 

Note that not all connectors provide configuration file. If you haven't find a link to configuration file for your connector that means configuration options are hardcoded in the connector's code.

Client-side configuration

RichFilemanager is a jQuery plugin, which means it accepts some options on plugin initialization step. The rest and the most of configuration options are defined in a separate JSON file.

You can see 2 files in the config folder. Both should be copied and renamed as the following:

  1. filemanager.config.default.json -> filemanager.config.json

Main configuration file. All scalar configuration options should be defined here. Reference.

  1. filemanager.init.js.example -> filemanager.init.js

Plugin initialization file. Contains options for the plugin initialization step. Callback functions are also here because JSON file format doesn't support a complex structures, like functions. Reference.

PLUGIN INITIALIZATION FILE

Define RichFilemanager plugin parameters here. You can notice that index.html file contains the $('.fm-container').richFilemanager() line as well, but it mostly serves just as fallback option (backward compatibility, e.g.). As long as config/filemanager.init.js file exists the initialization in the index.html will be ignored.

Plugin parameters

baseUrl - Default value ".". Base URL (relative or absolute) to access the RichFilemanager package folder. You may have to change default value if you use server-side framework which performs "publishing" of the package folder from secured location to some "dynamic" folder.

callbacks.beforeCreateImageUrl - Callback function. Provides an ability to modify URL of each image file previewed in the application.

callbacks.beforeCreatePreviewUrl - Callback function. Provides an ability to modify URL of each non-image file previewed in the application. It also will be called together with beforeSelectItem callback.

callbacks.beforeSelectItem - Callback function. Provides an ability to modify URL of file upon selecting it for WYSIWYG editor.

callbacks.afterSelectItem - Callback function. Provides an ability to perform actions after URL was passed to WYSIWYG editor.

callbacks.beforeSetRequestParams - Callback function. Provides an ability to modify request parameters before they have been sent to server. Expects object with request parameters to return.

callbacks.beforeSendRequest - Callback function. Provides an ability to prevent the sending of a request to the server. Expects boolean to return. Return false to prevent a request.

Example:

$('.fm-container').richFilemanager({
    baseUrl: '.',
    callbacks: {
        beforeCreateImageUrl: function (resourceObject, url) {
            return url += 'modified=ImageUrl';
        },
        beforeCreatePreviewUrl: function (resourceObject, url) {
            return url += '&modified=previewUrl';
        },
        beforeSelectItem: function (resourceObject, url) {
            return url += '&modified=selectItem';
        },
        afterSelectItem: function (resourceObject, url) {
            // example on how to set url into target input and close bootstrap modal window
            // assumes that filemanager is opened via iframe, which is at the same domain as parent
            // https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
            $('#target-input', parent.document).val(url);
            $('#modal', parent.document).find('.close').click();
        },
        beforeSetRequestParams: function (requestMethod, requestParams) {
            // add "jwt" parameter with "your_token" value to both GET and POST requests
            if (requestMethod === 'POST' && $.isArray(requestParams)) { // form parameters
                requestParams.push({name: "jwt", value: "your_token"});
            } else {
                requestParams.jwt = 'your_token';
            }
            return requestParams;
        },
        beforeSendRequest: function (requestMethod, requestParams) {
            // prevent all GET requests that lack "jwt" request parameter
            if (requestMethod === 'GET' && requestParams.jwt === undefined) {
                return false;
            }
            return true;
        }
    }
});

CONFIGURATION FILE

Client-side configuration file is a JSON file which is organized in sections. All options defined in the default configuration file affect the client-side application solely and detailed below.

The options section

theme - Default value "flat-dark". 2 themes are available in the package: default and flat-dark. You can create your own theme, simply by following instructions.

showTitleAttr - Default value false. Display title attributes on mouse hover (main panel only).

showConfirmation - Default value true. Do show a confirmation message after running actions.

browseOnly - Default value false. Allow users to browse only. Prevent upload/dowload and others interactions.

fileSorting - Default value "NAME_ASC". Sorting files criteria. See specific page for available values.

folderPosition - Default value "bottom". Position of folders in files/folders list. Takes value "bottom" or "top".

quickSelect - Default value false. Select file on main listing - avoid an extra click.

logger - Default value false. If set to true the application will log some workflow actions to the browser debug console.

allowFolderDownload - Default value is true. Allow users to download a Zip archive of a specific folder and contents (including subfolders).

allowChangeExtensions - Default value is false. Allow users to change extension when renaming files.

capabilities - Take an array as value. By default, all capabilities handled by the application are available : ["select", "upload", "download", "rename", "copy", "move", "replace", "delete", "extract"]. You can restrict it by suppressing some of them.

The language section

default - Default value "en". Language code to display localized messages. Available languages are listed in languages folder.

available - Array of language codes to display in the language switcher. Listed values should correspond names of JSON translation files in the languages folder.

The formatter section

datetime - Datetime formatter object. Should contain parameters appropriate to GlobalizeJs Date Module.

The filetree section

enabled - Default value true. Enable filetree (left-sided) panel.

foldersOnly - Default value false. Display files along with folders in the filetree panel. If set to true, only folders will be displayed.

reloadOnClick - Default value true. Reload folder content from server in the right panel when filetree item is clicked. If set to false, the click action just expanding/collapsing folder without reloading folder content from server.

expandSpeed - Default value 200. Duration in milliseconds, determining how long the expand/collapse animation will run.

showLine - Default value true. Display line that adjoins to the filetree items.

width - Default value 200. Default filetree panel width in pixels.

minWidth - Default value 200. Minimum filetree panel width in pixels.

The manager section

defaultViewMode - Default value "grid". Set default view mode: "grid" or "list"

dblClickOpen - Default value false. Takes double mouse click event to open files and folders. By default single click is used.

selection.enabled - Default value true. Enable files selection with mouse click and dragging.

selection.useCtrlKey - Default value true. Enable selection with holding down Ctrl key and mouse clicking in addition to mouse dragging.

renderer.position - Default value false. The position of panel which display an index file content for the loaded folder (similar to how GitHub display the content of readme.md file). Possible positions: "bottom" and "top". The false value means the panel is disabled.

renderer.indexFile - Default value "readme.md". The name of file whose content is supposed to be rendered into renderer panel.

The api section

lang - Default value "php". Set this to the server side language you wish to use. Available values: php, jsp, ashx, asp.

connectorUrl - Default value false. Url to server-side connector script. By default the application will determine it based on lang option. For PHP language it would be: "{FM_base_url}/connectors/php/filemanager.php". Can be overwritten with an absolute url.

requestParams - Default value {}. Parameters which will be passed with each request to the connector. Parameters specified in "GET" object will affect only GET requests. The same is true for "POST". "MIXED" parameters will affect both request types: GET & POST.

{
    "GET": {
        "name": "value"
    },
    "POST": {
        "name1": "value1",
        "name2": "value2"
    },
    "MIXED": {
        "name": "value"
    }
}

The security section

NOTE: The whole section is implicit. All options are come from the server-side and should not be defined explicitly.

readOnly - (IMPLICIT) Allow write operations when set to false. Otherwise disable all modifications to the filesystem, including thumbnail generation.

extensions.policy - (IMPLICIT) Takes value "ALLOW_LIST" / "DISALLOW_LIST". If is set to "ALLOW_LIST", only files with extensions that match extensions.restrictions list will be allowed, all other files are forbidden. If is set to "DISALLOW_LIST", all files are allowed except of files with extensions that match extensions.restrictions list.

extensions.ignoreCase - (IMPLICIT) Whether extension comparison should be case sensitive.

extensions.restrictions - (IMPLICIT) List of allowed / disallowed extensions, depending on the policy. The presence of an empty string ("") in list affects availability of files without extension.

The upload section

multiple - Default value true. Do enable multiple uploads, rely on jQuery-File-Upload.

maxNumberOfFiles - Default value 5. Maximum number of files to be processed per each multiple upload process. Only used when multiple is set to true. See details.

chunkSize - Default value false. To upload large files in smaller chunks, set this option to a preferred chunk size (in Bytes). If set to false, files will be uploaded as a whole. See details.

fileSizeLimit - (IMPLICIT) The maximum allowed file size (in Bytes). See details.

The clipboard section

enabled - Default value true. Enable clipboard feature. Displayed at the header and inside context menu. Visibility is based on "copy" and "move" capabilities.

encodeCopyUrl - Default value true. Affect the "copy URL to clipboard" feature. Encode copied URL so it's safe to open in browser. Set to false if you want to copy URL as is.

The filter section

Contains object which keys are filters names and values are file extensions that will be filtered out when the particular filter is applied. You are free to modify extensions list for predefined filters. Also you can extend the filters list. Just add new a line with associated extensions. If you added new filters make sure to update the index.html file and include appropriate HTML elements so that your filters become visible in the UI.

The search section

enabled - Default value true. Enable search feature. Display search box (input element) in the UI.

recursive - Default value false. The search is performed relative to the currently open folder. By default it's just filtered the preloaded items (client-side approach). Set to true if you want to search files/folders recursively (server-side approach).

caseSensitive - Default value false. Define whether the search will be case sensitive or not.

typingDelay - Default value 500. Enable search trigger on typing. Takes number value or false. Set to false in order to search by click the button.

The viewer section

absolutePath - Default value true. Use absolute path to preview images and media files. If set to false files will be previewed utilizing the connector path. Helpful when files aren't reachable by direct URL.

previewUrl - Default value false. Absolute URL that refers to storage folder of user files. Used along with absolutePath set to true. Can be specified explicitly in case the application unable to determine the URL itself.

viewer.image - options for "image" viewer.

image.enabled - Default value true. Enable viewer to preview full size image.

image.showThumbs - Default value true. Show image previews in grid/list views.

image.extensions - Array of accepted images extensions (default are jpg, jpe, jpeg, gif, png, svg).

viewer.video - options for "video" viewer.

video.enabled - Default value true. Enable viewer to preview media files via video player.

video.extensions - Array of accepted video files extensions (default are ogv, mp4, webm, m4v).

video.playerWidth - Default value 400. Video player width in pixels.

video.playerHeight - Default value 222. Video player height in pixels.

viewer.audio - options for "audio" viewer.

audio.enabled - Default value true. Enable viewer to preview media files via audio player.

audio.extensions - Array of accepted audio files extensions (default are ogg, mp3, wav).

viewer.iframe - options for "iframe" viewer

iframe.enabled - Default value true. Enable viewer to preview html and other appropriate files via iFrame.

iframe.extensions - Array of accepted files extensions (default are htm, html).

iframe.readerWidth - Default value 95%. Viewer width in pixels.

iframe.readerHeight - Default value 600. Viewer height in pixels.

viewer.opendoc - options for "opendoc" viewer.

opendoc.enabled - Default value true. Enable viewer to preview pdf and OpenOffice files.

opendoc.extensions - Array of accepted files extensions (default are pdf, odt, odp, ods).

opendoc.readerWidth - Default value 640. Viewer width in pixels.

opendoc.readerHeight - Default value 480. Viewer height in pixels.

viewer.google - options for "google" viewer.

google.enabled - Default value true. Enable viewer to preview files accepted by Google Docs Viewer.

google.extensions - Array of accepted files extensions (default are doc, docx, xls, xlsx, ppt, pptx).

google.readerWidth - Default value 640. Viewer width in pixels.

google.readerHeight - Default value 480. Viewer height in pixels.

viewer.codeMirrorRenderer - options for CodeMirror renderer.

codeMirrorRenderer.enabled - Default value true. Enable renderer to display content of files accepted by CodeMirror text editor.

codeMirrorRenderer.extensions - Array of accepted files extensions (default are txt, csv).

viewer.markdownRenderer - options for Markdown renderer.

markdownRenderer.enabled - Default value true. Enable renderer to display content of files accepted by Markdown-it parser.

markdownRenderer.extensions - Array of accepted files extensions (default are md).

The editor section

Options for CodeMirror editor. Specify extensions for files that you would like to be editable at the preview page. Note that extensions should come from supported viewers (see above). At the moment editor is compatible with the following viewers:

editable.enabled - Default value true. Enable to edit files accepted by CodeMirror text editor.

editable.theme - Default value "default". Set the editor theme. Available themes are listed here (do not include css extension).

editable.lineNumbers - Default value true. Display line numbers into the editor

editable.lineWrapping - Default value true. Enable wrapping into the editor

editable.codeHighlight - Default value true. Enable code highlighter. This feature may slow-down the application.

editable.matchBrackets - Default value true. Causes matching brackets to be highlighted whenever the cursor is next to them.

editable.extensions - Array of files extensions for online edition (default are txt, csv, md).

The customScrollbar section

You can enable the jquery custom scrollbar plugin to enhance UI. Notice, that this will decrease FM loading speed.

enabled - Default value false. Enable it by passing the value true.

theme - Default value "inset-2-dark". Specify the scrollbar theme you want to use. See available options.

button - Default value true. Add buttons to scrollbars (takes value true or false).

The extras section

extra_js - Default empty array. Array of javascript files to load. For example use this to load tiny_mce_popup.js

extra_js_async - Default value true. Specify if request is asynchronous or not (takes value true or false).

Implicit configuration options

It's an important section that you should learn. Some options can't be defined in the JSON configuration file explicitly due to security or other reasons. However client-side code expects this parameters, so they should be defined in the server-side connectors and returned upon "initiate" API request (see API wiki article). These can be options which extends existing sections, like upload.fileSizeLimit, and the complete new sections, like security.

Such options are marked as (IMPLICIT) in the list above, but not defined in the default configuration file, because they will be overwritten by API call and won't take effect. Their presence may only confuse.

Clone this wiki locally