---
title: "MoxieManager API"
description: "MoxieManager JavaScript API methods and callbacks."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/moxiemanager-api/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/moxiemanager-api/index.md"
version: "latest"
last_updated: "2026-11-12T00:18:41Z"
tokens: 3451
---
# MoxieManager API

## Javascript API

Here are some of the basic Javascript API integration methods.

| Method | Description |
| --- | --- |
| [browse](#js-browse) | Displays the file browser view. |
| [upload](#js-upload) | Displays the upload view. |
| [edit](#js-edit) | Displays the edit view. |
| [view](#js-view) | Displays the gallery view. |
| [createDir](#js-createdir) | Displays the create directory view. |
| [createDoc](#js-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](../moxiemanager-integration/#tinymce-integration).

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

```html
<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 +` <br>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](../moxiemanager-options/#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](../moxiemanager-options/#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](../moxiemanager-options/#filelist-main-toolbar) | Enables you to control what to display in the main toolbar of the filelist browse dialog. |
| [filelist_utils_toolbar](../moxiemanager-options/#filelist-utils-toolbar) | Enables you to control what to display in the utils toolbar of the filelist browse dialog. |
| [filelist_manage_menu](../moxiemanager-options/#filelist-manage-menu) | Enables you to configure what to display in the manage button menu. |
| [filelist_context_menu](../moxiemanager-options/#filelist-context-menu) | Enables you to configure what to display in the context menu. |
| [filelist_insert_toolbar](../moxiemanager-options/#filelist-insert-toolbar) | Enables you to configure what to display in the insert/cancel toolbar. |
| [editimage_main_toolbar](../moxiemanager-options/#editimage-main-toolbar) | Enables you to control what to display in the main toolbar of the edit image dialog. |
| [editimage_zoom_toolbar](../moxiemanager-options/#editimage-zoom-toolbar) | Enables you to control what to display in the zoom toobar of the edit image dialog. |
| [editimage_actions_toolbar](../moxiemanager-options/#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](../moxiemanager-options/#remember-last-path) | When enabled the MoxieManager will remember the last path the user was in when a file was selected. |
| [sort_by](../moxiemanager-options/#sort-by) | Changes the default sort by column for file listings. |
| [sort_order](../moxiemanager-options/#sort-by) | 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](#js-browse-oninsert) | Event triggered when file is inserted. |
| `oncreate` | Event triggered when folder is created. |

### Examples

#### Default path to browse files from

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

#### Custom oninsert callback function

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

#### Browse files

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

#### Pick files for input

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

#### Pick files with callback

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

#### Get absolute urls

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

#### Browse images only

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

#### Browse files only

```js
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

```js
moxman.browse({
    oninsert: function(args) {
        console.log(args.focusedFile);
    }
});
```
Since its an event, you can prevent the window to close using this method:

```js
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](#js-upload-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

```js
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

```js
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](#js-edit-onsave) | Callback that gets executed when an image or text file is saved. |

### Example

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

#### Edit image

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

#### Edit text file

```js
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

```js
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

```js
// 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

```js
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](#js-createdir-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

```js
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

```js
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](#js-createdoc-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

```js
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

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