File Manager API reference

All parameters which you can pass to Flmngr.load({params}) method are also available here too. So you can override some values (except apiKey) or pass parameters missing in Flmngr.load() call but required for this method, i. e. urlFiles and urlFileManager.

An URL or a list of URLs which need to be preselected when file manager opens.

You omit this parameter or pass null need to open file picker with no file selected. But if you wish to let user editing its previous file selection, please specify this parameter.

Each URL must start with urlFiles in the path (they need to exist in your storage).

Not applicable when isMultiple is set to null (when the file manager does not expect any file to be picked).

Default is null (no preselected file) Optional

A list of exceptions to accept when the user picks some files or file. This will also filter all others files and images from the file view.

For example, you can limit picking only images by setting the value to ["png", "jpg", "jpeg", "webp"] or if you wish to let the user select only PDF files: ["pdf"].

Not applicable when isMultiple is set to null (when the file manager does not expect any file to be picked).

Default is null (any file extension is accepted) Optional

Defined how many files you wish this dialog to return.

Default is false Optional

• false

  Opens the file manager to select a single file or image.

• true

  Opens the file manager to select multiple files or images.

• null

  Opens the file manager just to manage the file system without the ability to pick anything.

Controls an initial file manager dialog state: maximized window or a dialog.

Default is false (dialog) Optional

Show or hide maximize/unmaximize button.

Default is true Optional

Show or hide close button.

You can set to to false if wish to disable close dialog (cancel) feature.

Default is true Optional

You can enable or disable reordering picked files when the file manager is opened with isMultiple set to true.

Flmngr file manager always passes a list of files and images picked by the user into onFinish listener ordered as files were shown in the pick area of the dialog.

Default is true Optional

A list of image formats IDs to retrieve. You can set here IDs specified in imageFormats, so when onFinish listener is called you automatically receive the URLs of generated previews of selected images.

For example, you can ask to generate small and medium previews (if didn't change imageFormats parameter) by setting the value to ["preview", "medium"].

Default is null (get only original images) Optional

How many directory levels to expand on start.

Default is 99. Optional

• 0

  Show collapsed root directory.

• 1

  Show only child folders of the root directory.

• 2

  Show children and children of the children of the root directory.

• ...

  etc.

How Flmngr should order directories in the directory tree.

Default is none. Optional

• none

  No sorting, will show the list as it is received. Sometimes the server can return the list in alphabetic order, sometimes not. This can depend on your server file system and Flmngr will not guarantee any exact behaviour here.

• alphabetical

  Flmngr will sort directories in strict alphabetical order like:

  dir-a
  dir-b
  dir-c-1
  dir-c-11
  dir-c-2

• natural

  Natural (human) sorting is very similar to alphabetical but respects numeration:

  dir-a
  dir-b
  dir-c-1
  dir-c-2
  dir-c-11

Flmngr can avoid loading whole the directory tree at once and load it directory by directory when user clicks on them.

Default is false. Optional

Premium Flmngr users can remove Flmngr logo.

Default is false. Optional

A callback to receive a file list specified by the user.

Each file has a URL but also (if required by the createImageFormats parameter) will contain a formats array with a set of required formats, where the format field of each image variant will contain an ID of the requested format.

Optional Default is null, but you should set a callback if expect some file will be picked by the user.

A callback to handle a moment when the user closed the dialog without picking a file.

Default is null Optional

All parameters which you can pass to Flmngr.load({params}) method are also available here too. So you can override some values (except apiKey) or pass parameters missing in Flmngr.load() call but required for this method, i. e. urlFiles and urlFileManager.

An URL of an image you wish to edit and save.

You can specify some image from your storage of Flmngr, external URL (outside of Flmngr storage specified in urlFiles), or Base64 image data.

If you specified an external URL or Base64 image data, you should specify dirUploads directory (if you didn't, defaultUploadDir will be used).

When using Base64 image please also specify a filename for the default filename. For external images, it will be an URL part between the last / symbol and ? or end of the URL.

Note: if a domain of the page where the user edits an image is not the same as a domain where the image to edit is located (subdomains are different domains), you must configure CORS header of HTTP server (NGinx/Apache/...) on the server with the image to allow access from the domain from which you load Image Editor. Without doing this Image Editor will show a blank image!

This parameter will set a directory you wish to upload into.

Is used for external URLs and Base64 images only. Will not be used for images that are located inside Flmngr storage because their directory is already defined so Image Editor will ask to overwrite or rename the image on save.

The path of this directory is relative to urlFiles (dirFiles option on the server).

If you set it beforet it will override a value defaultUploadDir by calling Flmngr.load({params}) separately.

The default is "/" (root directory of your storage) if defaultUploadDir was not set.Optional

If you passed an external URL and the filename was not detected or you passed a Base64 image, you should set this parameter to define a default filename for an image to save.

Default is "image" (extension is set depending on a file format specified by the user in the save dialog). Optional

A callback to handle successful finish editing and saving (uploading) of an image. Get the full absolute URL from the urlNew argument of the callback.

Default is null Optional

A callback to handle if the user cancelled editing (and saving) an image and closed the Image Editor dialog.

As you see there is no onFail callback. This is because all faults while saving an image will lead to showing an error dialog and will return the user to the save image dialog back. So he or she can only cancel whole the editing and go into onCancel or successfully finish with onSave.

Default is null Optional

All parameters which you can pass to Flmngr.load({params}) method are also available here too. So you can override some values (except apiKey) or pass parameters missing in Flmngr.load() call but required for this method, i. e. urlFiles and urlFileManager.

An URL of an image or Base64 image data you with to edit.

This parameter is fully equivalent to url parameter of Flmngr.editAndUpload({params}) method, so please read its detailed info to understand all your abilities and pitfalls.

A callback to handle when the user presses the "Save" button in the dialog of Image Editor.

After any checks you wish to do before saving, please call onExport() method (retrieves data of the image as File object) passed as an argument. Then handle the result inside onExported() and onFail().

If your logic detects some fail (or you fall into onFail() callback), you may want to show some error message. Then just return from this onSave callback so the user will return to the edit image dialog.

If your code has successfully exported the image and saved it wherever you wanted, close the Image Editor dialog by calling onClose() method (the 2nd argument of this callback).

A callback to handle if the user cancelled editing (and saving) an image and closed the Image Editor dialog.

As you see there is no onFail callback. This is because all faults while saving an image will lead to showing an error dialog and will return the user to Image Editor back. So he or she can only cancel whole the editing and go into onCancel or successfully finish with onSave.

Default is null Optional

All parameters which you can pass to Flmngr.load({params}) method are also available here too. So you can override some values (except apiKey) or pass parameters missing in Flmngr.load() call but required for this method, i. e. urlFiles and urlFileManager.

A list of files or links you wish to upload programmatically, so you can mix Files objects and string URLs in this array and Flmngr will return them in the same order inside onFinish callback.

This parameter will set a directory you wish to upload into.

The path of this directory is relative to urlFiles (dirFiles option on the server).

If you set it before, it will override a value defaultUploadDir by calling Flmngr.load({params}) separately.

The default is "/" (root directory of your storage) if defaultUploadDir was not set.Optional

Switch between file overwriting and automatic renaming on upload using this parameter.

Default is "OVERWRITE". Optional

• "OVERWRITE"

  All uploaded files will overwrite existing ones on your server if they exist in the same folder with the same name.

• "AUTORENAME"

  The file manager will automatically rename newly uploaded files that conflict with existing ones. The name of renamed files will be like "image_1.png".

A callback to handle the successful finish of file uploading. This callback will receive a list of files ordered as you specified in filesOrLinks parameter.

Each file will have url parameter you can use, but there will be also more additional info especially since this is an image file.

url is a full absolute URL (based on urlFiles you passed) that you can use everywhere, name is the name of file in the file system, size is the number of bytes files takes on disk, timestamp comes in millisec from Unix epoch, width and height are in pixels, blurHash is a super small preview of an image.

Default is null Optional

A callback to handle any faults while uploading. If the upload finishes with a negative result, this callback is called with an error parameter containing a human-readable description of the problem.

Default is null Optional

All parameters which you can pass to Flmngr.load({params}) method are also available here too. So you can override some values (except apiKey) or pass parameters missing in Flmngr.load() call but required for this method, i. e. urlFiles and urlFileManager.

A list of URLs of images that already exist in your server storage to create another image formats.

A key-pair set with format IDs you passed in imageFormats as keys and a strategy of format creation as values.

Possible strategies for format creation:

• "ALWAYS"

  An image variant will be created if does not exists, and will be mandatorily refreshed even if the file already exists.

• "DO_NOT_UPDATE"

  An image variant will be created only if its file does not exist. If there is already such file, it will be returned in onFinish callback. This way is good if you wish to use cached copy whenever it exists.

• "IF_EXISTS"

  Image variant will be created only if its file does exist. So this is a way to regenerate a preview if you have changed its original directly via filesystem (there is no need to do this manually after Flmngr.upload({params}) because it does the same automatically).

Set to true if you wish to have a modal progress bar on the screen while creating formats. For custom handling progress you can use - onProgress handler.

Default is false. Optional

A callback to handle successful image variants creation. The result is an associative array where keys are urls you passed to the method, and values are arrays of format ID - URL pairs (the same format IDs you passed in createImageFormats).

A listener is called every time the progress changes. It gives to you a number of processed URLs, a number of failed ones, and a percentage progress in the total argument. This callback is useful for implementing a custom progress bar in your app.

Default is null Optional

Your Premium API key or FLMNFLMN if you use a free version.

Do not pass this parameter when you use some integration that automatically loads Flmngr with some API key: any JS snippet based app, CKEditor, TinyMCE, Drupal, Froala.

This parameter is for NPM package based integrations only: direct use of the NPM package in your app, React, Vue, etc.. In such configurations, you can omit it if passed an API key at least once in some Flmngr method including Flmmngr.load(apiKey) which is recommended to call when the page loads.

Do not mix different API keys in one application, only the first one will be used.

Prefix to your files directory in URL notation. For example: https://example.com/images/

In a multi-user environment, you can dynamically set this parameter depending on the current user logged into your app/CMS (do not forget to also set the directory on the server in the same way).

URL on your server which will serve all requests from Flmgnr. This is the URL you bound Flmngr backend to. For example: https://example.com/scripts/flmngr.php

A callback to prepare CSRF token if your app requires that.

This parameter must contain a callback Flmngr will execute before any request to the server.

This callback should obtain CSRF token from your app and pass it into the onSuccess() listener with POST parameters (params field) or headers (headers field). Flmngr will set such parameters and/or headers when sending the request.

If there was an error while getting the CSRF token, call the onError() listener. Flmngr won't make any request in this case.

If your app does not require a CSRF token, just omit this parameter.

Default is null Optional

These two parameters can be used to set HTTP Basic Authentication credentials if your server uses such access checking.

Default is null for both parameters. Optional

When you use Amazon S3 or Azure Blob storage support, please specify your access key here. So you do not need to expose whole the configuration when allowing access to cloud storage for your users, you expose only the access key which is linked to the credentials kept in secret. The access key can be changed when you need it.

Default is null. Optional

Please specify the Unsplash API key as a value of this parameter in order to access 30000+ free stock images from the file manager.

Default is null. Optional

Defines whether the file manager dialog should be opened maximized or not.

Default is false. Optional

Defines whether the file manager dialog should show maximize button in the title or not. Set to false if wish to avoid maximizing the dialog by the user.

Default is true. Optional

Defines whether the file manager dialog should show a close button in the title or not. Set to false if wish to deny closing the dialog without picking some file.

Default is true. Optional

Setting this filter will hide some files in the list. For example, you can filter out all *.bmp files.

Default is [".htaccess", ".htpasswd", ".gitignore"].Optional

Setting this filter will hide some directories in the tree. For example, you can filter out .git folders.

The default is [".cache", ".tmp", "tmp"].Optional

Defines default upload directory inside your storage. This parameter is not used when the file manager dialog was opened using Flmngr.open({params}) because there is always some selected directory there. But this parameter will be used when you call Flmngr.upload({params}) without dirUploads option.

The path of this directory is relative to urlFiles (dirFiles option on the server).

Default is "/" (root directory of your storage).Optional

Defines a structure for uploads made outside of Flmngr dialog, for example when you press "Upload" external button. All such uploaded files will be stored inside defaultUploadDir directory.

And these options let you change the type of folder structure inside this upload directory.

Default is "flat".Optional

• "flat"

  All files will be placed directly into defaultUploadDir.

• YYYY/MM

  The directory structure of format defaultUploadDir/year/month/ will be created (if does not exist) for placing uploaded files.

• YYYY/MM/DD

  The directory structure of format defaultUploadDir/year/month/date/ will be created (if does not exist) for placing uploaded files.

• Please do not use any custom formats, only the values above are available now.

When the user uploads bulk files, the Flmngr file manager will upload them simultaneously. This parameter defined a maximum number of simultaneous upload threads

Default is 5.Optional

File manager shows files with automatic pagination executed when users scroll the files list till the end. This parameter defines how many files should contain one such page.

Default is 100.Optional

Image formats parameter defined how the Flmngr file manager should deal with different image formats. For example, you can have image.png and image-preview.jpg so the file manager will group them in the file list view if you have a format with the -preview suffix. Deleting an original will also delete its formats, the same is for renaming, moving, etc..

Flmngr can also automatically create image formats when you need it, for example when the user inserts an image as a preview. To do this you need to define this parameter and call Flmngr.open({params}) with the parameter Flmngr.createImageFormats({params}) - a set of image format IDs you need to get with a picked file.

In the same way, you can programmatically request image formats for some image and they will be created if did not exist before, see Flmngr.createImageFormats({params}) method for that.

Another feature is to automatically resize the original image to be smaller than maxWidth and maxHeight of the default image format.

Optional Default is:

[
  {
    "id": "preview",
    "title": "Preview",
    "suffix": "-preview",
    "maxWidth": 480,
    "maxHeight": 480
  },
  {
    "id": "medium",
    "title": "Medium",
    "suffix": "-medium",
    "maxWidth": 1024,
    "maxHeight": 1024
  },
  {
    "id": "default",
    "title": "Default",
    "suffix": null,
    "maxWidth": 10000,
    "maxHeight": 10000
  }
]

Do you wish to check both Flmngr and ImgPen for loaded or just Flmngr? Set to false if want to omit check for ImgPen is loaded.

Default is true. Optional

URL you wish to retrieve the no-cache version for.

All parameters which you can pass to Flmngr.load({params}) method are also available here too. So you can override some values (except apiKey) or pass parameters missing in Flmngr.load() call but required for this method, i. e. urlFiles and urlFileManager.

Sets a type of dialog which will be opened - with textbox input for one URL only or with textarea input where the user can specify one URL per each line.

Default is false. Optional

Called on the user to confirm the specified URL or URLs and the dialog was closed and returns all user URLs in the same order.

Called on user pressed the cancel button and the dialog was closed.

Default is null. Optional

Specify whether one or more files will be allowed to select.

Default is false. Optional

A list of file extensions to allow to select.

For example, you can pass [".doc", ".docx"] if you wish to allow selecting only Microsoft Word documents. You can also specify allowed image extensions here.

Note, some legacy versions of browsers (especially their Linux versions) ignore this parameter. So please re-check the file types the user selected after you got them.

Default is null (all file extensions are allowed). Optional

This callback will be called after the user successfully selected some files or images. Argument files contain an array of standard File entities of a browser.

There is no onCancel callback due to browsers do not support it.