MoxieManager API

Javascript API

Here are some of the basic Javascript API integration methods.

Method Description

browse

Displays the file browser view.

upload

Displays the upload view.

edit

Displays the edit view.

view

Displays the gallery view.

createDir

Displays the create directory view.

createDoc

Displays the create document view.

If you are configuring this from in a TinyMCE init config you need to check out the API here.

If you are using MoxieManager Stand-alone, first include this script.

<script src="<yourpath>/moxiemanager/js/moxman.loader.min.js"></script>

Then you can use these snipplets, either on buttons or wherever you like.

browse

This method allows you to browse for files in the MoxieManager and insert these into form fields or to a custom callback function.

Parameters

Name Description

path

Public file system path to display by default. For example: +/files/images +

In order to configure a different start path from the rootpath, the first part of the path needs to be the last part of the rootpath. So if your rootpath is /www/domain/myfiles then your path needs to be set to /myfiles/subfolder

rootpath

Public file system path to use as the root. This option needs to be within the configured backend filesystem.rootpath for security reasons. If you have filesystem.rootpath configured to c:/inetpub/wwwroot, and want to constrict users to accessing c:/inetpub/wwwroot/files/images, you need to set this option to: /wwwroot/files/images

fields

Comma separated list of field ID’s to populate with selected file url. If you are using oninsert you can not use fields option and the other way around.

view

Default view to open. Defaults to files but can also be configured to thumbs.

insert

Boolean option that allows you to disable the insert functionallity. Can be used when the moxiemanager is used in standalone mode.

filter

Initial filter to apply to file selection. This option will fill the filter input field with the value specified.

extensions

Comma separated list of file extensions to display for.

include_file_pattern

Regexp pattern that the files need to match inorder to be displayed.

exclude_file_pattern

Regexp pattern that will be excluded from file list if it matches.

include_directory_pattern

Regexp pattern that the directories need to mathc inorder to be displayed.

exclude_directory_pattern

Regexp pattern that will be exluded from file list if it matches.

disabled_tools

Comma separated list of tools to disable.

hidden_tools

Comma separated list of tools to hide.

url

Url of input file. If this is specified the MoxieManager will try to resolve the URL into a local file system path and the open the parent directory of that file and select the file.

relative_urls

If this option is set to true, all URLs returned from the MoxieManager will be relative from the specified document_base_url. This option is set to false by default.

document_base_url

Document base URL defaults to the current page. This is the point relative URLs will be relative to.

no_host

Enables you to remove scheme/protocol and host name from urls produced.

multiple

Boolean value, enable inserting multiple files or not, default true.

width

Set the default width of the window, note that a to small value may break the UI. Should be a number pixel value only, example: width: 600

height

Set the default height of the window, note that a to small value may break the UI. Should be a number pixel value only, example: height: 400

fullscreen

Boolean value, set to true to open in fullscreen, default false.

title

Sets the title of the main screen, replaces "MoxieManager" default title.

leftpanel

Boolean value, display or hide the left filesystems panel, true by default.

insert_filter

Callback that gets executed when files are selected and inserted. This callback allows you to alter the JSON data before it gets inserted into a form field or passed to the oninsert callback.

skin

Enables you to set a custom skin to be used.

filelist_main_toolbar

Enables you to control what to display in the main toolbar of the filelist browse dialog.

filelist_utils_toolbar

Enables you to control what to display in the utils toolbar of the filelist browse dialog.

filelist_manage_menu

Enables you to configure what to display in the manage button menu.

filelist_context_menu

Enables you to configure what to display in the context menu.

filelist_insert_toolbar

Enables you to configure what to display in the insert/cancel toolbar.

editimage_main_toolbar

Enables you to control what to display in the main toolbar of the edit image dialog.

editimage_zoom_toolbar

Enables you to control what to display in the zoom toobar of the edit image dialog.

editimage_actions_toolbar

Enables you to control what to display in the actions toolbar/pabel of the edit image dialog.

fileinfo_fields

Space separated list of fields to display currently "path" and "url".

remember_last_path

When enabled the MoxieManager will remember the last path the user was in when a file was selected.

sort_by

Changes the default sort by column for file listings.

sort_order

Changed the default sort order asc/desc.

filelist_insert_event

Lets you specify an event to insert on can be click, dblclick or none.

Events

In version 2.0 of MoxieManager, some events where removed and added by requestion from the users, this is a list of these events.

Name Description

onopen

Event triggered when opening.

onclose

Event triggered when closing.

onupload

Event triggered when an upload is completed.

onsave

Event triggered when a text file or image is edited.

oninsert

Event triggered when file is inserted.

oncreate

Event triggered when folder is created.

Examples

Default path to browse files from

moxman.browse({
    path: '/files/images'
});

Custom oninsert callback function

moxman.browse({
    oninsert: function(args) {
        console.log(args.focusedFile);
    }
});
On create event testing
moxman.browse({
    oncreate: function(args) {
        console.log(args);
    }
});
You can also use events when calling createDoc (or other dialogs) directly
moxman.createDir({path: '/files', oncreate: alert('File created')});

Browse files

<script>moxman.browse();</script>

Pick files for input

moxman.browse({fields: 'url'});

Pick files with callback

moxman.browse({
  oninsert: function(args) {
    console.log(args.files[0].url);
  }
});

Get absolute urls

moxman.browse({fields: 'absurl', no_host: true});

Browse images only

moxman.browse({
  view: 'thumbs',
  fields: 'url',
  extensions:'jpg,gif,png'
});

Browse files only

moxman.browse({
  view: 'files',
  fields: 'url',
  extensions: 'txt'
});

oninsert callback

This callback function gets executed when users select files to be inserted. The callback has one argument with some properties.

Properties

List of properties for the callback args.

Name Description

focusedFile

File object for the currently focused file. This would normally be the first selected file if the user selects multiple files.

files

FileCollection containing all files selected.

Object returned is also an event.

Example

moxman.browse({
    oninsert: function(args) {
        console.log(args.focusedFile);
    }
});

Since its an event, you can prevent the window to close using this method:

moxman.browse({
    oninsert : function(args) {
        console.log(args.focusedFile);
        args.preventDefault();
    }
});

upload

This method allows you to upload files directly to the specified path. It also enables you to get the path and urls to those uploaded files.

Parameters

Name Description

path

Public file system path to upload files to.

onopen

Fires after the dialog has been opened. Can be used to produce a custom throbber.

onupload

Callback that gets executed when files are uploaded.

relative_urls

If this option is set to true, all URLs returned from the MoxieManager will be relative from the specified document_base_url. This option is set to false by default.

document_base_url

Document base URL defaults to the current page. This is the point relative URLs will be relative to.

remove_script_host

Enables you to remove scheme/protocol and host name from urls produced.

upload_auto_close

Automatically closes the upload dialog if all files where successfully uploaded. Disabled by default.

Example

moxman.upload({
    path: '/files/images',
    onupload: function(args) {
       console.log(args.files);
    }
});

onupload callback

This callback enables you to intercept the uploaded files.

Parameters

Name Description

files

FileCollection instance with all the uploaded files.

Example

moxman.upload({
    path: '/files/images',
    onupload: function(args) {
       console.log(args.files);
    }
});

edit

This method enables you to edit images or text files directly by passing in a public path to a file.

Parameters

Name Description

path

Public path to the file to edit. For example: /files/images/image.jpg

onopen

Fires after the dialog has been opened. Can be used to produce a custom throbber.

onsave

Callback that gets executed when an image or text file is saved.

Example

moxman.edit({
    path: '/files/images/image.jpg',
    onsave: function(args) {
        console.log(args.file);
    }
});

Edit image

moxman.edit({
  path: '/files/teddybear.jpg',
  onsave: function(result) {
    alert(result.file.url);
  }
});

Edit text file

moxman.edit({
  path: '/files/test.txt',
  onsave: function(result) {
    alert(result.file.url);
  }
});

onsave callback

This callback gets executed when files are saves by the edit dialog.

Parameters

Name Description

file

File instance of the file being saved.

Example

moxman.edit({
    path: '/files/images/image.jpg',
    onsave: function(args) {
        console.log(args.file);
    }
});

view

This method enables you to view images in a specific path.

Parameters

Name Description

path

Public file system path to the file to view.

paths

Array of public file system paths to display.

onopen

Fires after the dialog has been opened. Can be used to produce a custom throbber.

Example

// View the specified image
moxman.view({
    path: '/files/images/image.jpg'
});

// View the specified images
moxman.view({
    paths: ['/files/images/image.jpg', '/files/images/otherimage.jpg']
});

View image

moxman.view({
  path: '/testfiles/camera.jpg'
});

createDir

This method enables you to create a directory in the specified path.

Parameters

Name Description

path

Public file system path where the dir should be created.

oncreate

Callback that gets executed when the directory is created.

onopen

Fires after the dialog has been opened. Can be used to produce a custom throbber.

Example

moxman.createDir({
    path: '/files/images',
    oncreate: function(args) {
        console.log(args.file);
    }
});

oncreate callback

This callback gets executed when a directory is created by the createDir method.

Parameters

Name Description

file

File instance of the created directory.

Example

moxman.createDir({
    path: '/files/images',
    oncreate: function(args) {
        console.log(args.file);
    }
});

createDoc

This method enables you to create a document in the specified path.

Parameters

Name Description

path

Public file system path where the document should be created.

oncreate

Callback that gets executed when the document is created.

onopen

Fires after the dialog has been opened. Can be used to produce a custom throbber.

Example

moxman.createDoc({
    path: '/files/images',
    oncreate: function(args) {
        console.log(args.file);
    }
});

oncreate callback

This callback gets executed when a document is created by the createDoc method.

Parameters

Name Description

file

File instance of the created document.

Example

moxman.createDoc({
    path: '/files/images',
    oncreate: function(args) {
        console.log(args.file);
    }
});