Creates new instance of Flmngr client. This action usually made just once to preconfigure Flmngr and do not pass all the options into Flmngr methods. Save returned object and use it as Flmngr API.
If you use cloud version of Flmngr inside some WYSIWYG HTML editor, you already have Flmngr instance created and stored inside CKEDITOR.instances['id'].flmngr or TinyMCE.editors['id'].flmngr variable.
In case you load Flmngr from JS file manually, please use window.flmngr["create"](...) function (do not forget to wait until library is loaded and window.flmngr is set), it is equivalent to new Flmngr(...) call.
Example:
import {Flmngr} from "flmngr";
import {ImgPen} from "imgpen";
let flmngr = new Flmngr({
urlFileManager: 'https://example.com/flmngr',
urlFiles: 'https://example.com/images/',
defaultUploadDir: '/uploads/',
imgPen: new ImgPen({
cropRatios: [{w: 4, h: 3}, {w: 3, h: 2}]
})
});
The directory where to place all quick uploads. Relative to the location of URL specified in urlFiles.
This directory inside your storage will be used when you call some method without defining a directory where to save files.
The list of custom image formats and proportions you need to resize images too.
For example you plan to request images with generated previews by using the method pickFiles - you need to define preview format here just once. This will also affect for filtering images of these formats inside the file manager browser window.
For more details please see FlmngrImageFormat class.
If you wish to use image editor together with Flmngr file manager, please pass [created ImgPen instance] as a parameter. If you set this parameter you can open the image editor from the file browser window and also call editImageAndUpload method of Flmngr.
Maximum thread number for uploading files. Only this number of connections Flmngr will open at once interacting with the backend.
URL on your server which will serve all requests from Flmgnr. This is the URL you bound Flmngr backend to.
Prefix to your files directory in URL notation.
For example: https://example.com/images/
Opens files browser fullscreen dialog and offers user to select some file from the storage. When user selects it and presses "OK" (or cancels), the dialog is being closed.
The set of extensions valid for selecting. Each value of an array must have this format:
'jpeg' and 'jpg' are different extensionsAll the files which have another extension will be filtered from the view.
Use this option when you need to ask user about the exact file. Examples are below.
Ask for an archive:
acceptExtensions: ["zip"]or ask for image file of format recommended for web:
acceptExtensions: ["png", "jpeg", "jpg", "svg", "webp"]or ask for any supported type of image:
acceptExtensions: ["png", "jpeg", "jpg", "svg", "webp", "bmp", "gif"]By the way, you can get this list by calling getImageExtensions method.
Do you expect user will select a single file (limit with selecting one file) or there could be any number of files?
Called when user presses "Cancel" button.
Success callback with a list of URLs selected by user and already prefixed with urlFiles you passed to Flmngr.constructor.
Files to select when file browser dialog is opened. By default file browser just will open its root folder without selecting any files.
You can pass any URLs here without a worry, but only URLs, which start with [urlFiles], will be detected as files inside your storage and selected. All the other (external) URLs will be just ignored.
Setting this option is useful when you already have a file selected in some field, so user will start from its directory (and will see in the file browser window which file or files are exactly selected).
Asks server to generate another formats of images. For example you need to generate a preview for your image or a set of resized user's avatars in two or more different sizes (this method is very flexible).
The associative array of formats you need to the mode of how to process this format. The formats must be already defined in imageFormats parameter passed to Flmngr.constructor, here you only list which do you require: they will be applied to each URL you pass as urls.
Modes can be:
"ALWAYS" - resized image will be created or recreated"IF_EXISTS" - only update existing previews"DO_NOT_UPDATE" - only create new images (use already existing as cache)Example:
imageFormats: {
"preview": "ALWAYS"
}Success callback returning you a result in format: source URL to map of formats (image format id to an URL of generated image).
Called each time Flmngr has any progress with creating image format.
If set to true, the dialog with the progress indicator will be shown until the request is finished.
The list of URLs stored on your file server which do you need to resize. All of them must start with prefix from urlFiles (passed to Flmngr.constructor) in order to correctly detect their directory (resized images will be places in the same directory).
Calls ImgPen image editor. User will edit image and optionally save it. This method will not upload a result image to the server - it will only return data (please use editImageAndUpload method if you need to upload an image back).
This is the full equivalent of calling method editImage on ImgPen object instance (pass it to Flmngr.constructor to use this feature).
Called when user presses "Cancel" button and editor is closing.
Callback fired when user presses "Save" inside the image editor. file contains BLOB with an image data. You can use it manually to do something, like uploading to the server (use upload method) or passing to your own application.
When this callback is called, the progress indicator will be shown on the screen and block UI of the image editor. You do not need to use your own indicator, but after you save an image (even when you have some error) you need to call onFinish function to unblock UI (pass doClose parameter to allow or disallow closing image editor).
URL of an image to edit. This can be the file from your own storage or an external image (with correctly configured CORS on the external server).
Directory to upload into.
When user presses "Cancel" in the image editor, this callback is called.
Callback fired on upload failed. If this method is not specified, Flmngr will just show this error message.
The same as onFinish callback of upload method, but only one URL is passed here (as string instead of an array of strings).
URL of an image to edit.
Asks a server for a version of backend. This is asynchronous function due to requires to ask server about a version. In case such request was already done (made on Flmngr initialization automatically), callback will be called immediately.
image extensions currently supported by Flmngr.
At this version they are: ['png', 'jpeg', 'jpg', 'webp', 'svg', 'gif', 'bmp'].
This is the very flexible function which is used to select, reselect and reorder files and images you need to ask user for. Despite [browse] method this one will not just ask for a file, but work in terms of files you already have selected. Use this method always when you work with lists.
It can be used to ask files for your image gallery, but also you can pass the list of existing images in a gallery: pickFiles will return a new list of images maybe reordered and extended by end user.
The list of extensions to accept. By default all file extensions are accepted.
You can block files reordering by setting this option to false.
The directory for file uploads. If you do not specify anything defaultUploadsDir passed previosly to Flmngr.constructor will be used here.
The required list of IDs of image formats already defined as imageFormats parameter of Flmngr.constructor.
The flag indicating do we operate a list or a single file.
The list of URLs you already have and want user to extend or modify
Called if user cancelled picking files.
Callback called on success with the list of specified files. files is an array of selected files with additional required formats (inside formats field of each file structure).
The flag shows files of which extension can user specify. Note. Not all browsers support this option, some legacy ones can ignore it or use not too accurate.
The flag shows can user specify many files or just one. Note. Not all browsers support this flag, some legacy ones can ignore it.
The callback fired when user selected some files.
The flag shows can user specify many files or just one.
Called when user presses "Cancel" button.
The callback fired when user specified a list of URLs and pressed "OK".
Uploads files or links (a list of URLs) to a specified directory on the server. If no directory is selected, the default upload directory (defaultUploadDir parameter passed to Flmngr.constructor) will be used.
The directory to upload files into. If not specified, the default upload directory will be used. Relative to the root of the file storage.
The list of files or links to upload. You can pass file objects of your own application, ask user for files with the method selectFiles or specify external URLs.
Callback returning you an error occurred on upload. Getting this error means all partially uploaded files were already removed from the server and there is no any garbage neither in the upload directory nor in the temporary one (Flmngr implements transactional uploads model).
Success callback is called when all files were uploaded. urls arrays contain a list of URLs fully formed with using prefix from urlFiles parameter you passed to Flmngr.constructor. Alternatively you can use raw paths argument to obtain paths relative to urlFiles (before merging with it).
a list of URLs of uploaded files in callback, or error message in callback.
This is Flmngr class you should use to interact with your server to access files: upload, list, modify or delete them. This class contains API both for atomic actions (select file, upload, ...) and for composite UI actions like pickFiles or browse.
When installing Flmngr as SDK, please use the modern (recommended) way to import Flmngr class (in JavaScript or TypeScript):
import {Flmngr} from "@edsdk/flmngr";or legacy one:
let flmngrLib = require("@edsdk/flmngr");If you use cloud version of Flmngr inside some WYSIWYG HTML editor, you already have Flmngr instance created and stored inside
CKEDITOR.instances['id'].flmngrorTinyMCE.editors['id'].flmngrvariable.In case you load Flmngr from JS file manually, please use
window.flmngr["create"](...)function (do not forget to wait until library is loaded andwindow.flmngris set), it is equivalent tonew Flmngr(...)call.The shortest example of Flmngr file manager used together with ImgPen image editor:
import {Flmngr} from "flmngr"; import {ImgPen} from "imgpen"; let flmngr = new Flmngr({ urlFileManager: 'https://example.com/flmngr', urlFiles: 'https://example.com/images/', defaultUploadDir: '/uploads/', imgPen: new ImgPen({ urlBase: 'https://example.com/imgpen' }) }); flmngr.browse({ isMultiple: false, acceptExtensions: ["png", "jpeg", "jpg", "svg", "webp", "bmp", "gif"], onFinish: (urls) { // "urls" variable here has a list of files selected // In this sample we just print it to console. console.log(urls); } })