Install Flmngr NPM package
Using the NPM package of Flmngr file manager is the easiest way to include it in your application and use it with any framework or without it.
Call Flmngr from your code
Now you can import Flmngr
namespace (the only namespace the package exports) and use it:
import Flmngr from "flmngr";
Flmngr.open({
apiKey: "FLMN24RR1234123412341234", // default free key
urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
urlFiles: 'https://fm.flmngr.com/files', // demo file storage
isMultiple: false, // let selecting a single file
onFinish: (files) => {
console.log("User picked:");
console.log(files);
}
});
This is an example of one case where you would need to open the file manager and wait until the user picks some files and receive these files in a callback after the dialog is closed. Flmngr.open({params})
is used for this.
There are many other available methods described in the API reference section. Live code samples are provided.
Optimization
The Flmngr NPM package loads a minimal part of Flmngr. Most of its components (file manager and image editor) will be automatically loaded from the official CDN on the first call of some method.
To ensure there is no delay on the first call, please consider preloading Flmngr using Flmngr.load({params})
.
This call will not only preload the file manager and image editor from the CDN, but also preconfigure them. After passing some parameters into this function you should not include these parameters in any other calls unless you wish to override them.
We strongly recommend using this preload call and including these parameters:
apiKey
- your API key. It is the only parameter that is truly required and cannot be overridden.urlFileManager
- URL of your PHP backend for the file manager. It is recommended but can be overridden in future calls.urlFiles
- URL of where your files are located. It is also recommended and can be overridden in future calls.
So the optimized code will be:
import Flmngr from "flmngr";
// Starts async loading Flmngr code from CDN (this is non-blocking action)
Flmngr.load({
apiKey: "FLMN24RR1234123412341234", // default free key
urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
urlFiles: 'https://fm.flmngr.com/files', // demo file storage
});
// Somewhere when you need to open Flmngr
Flmngr.open({
// Do not specify parameters already passed into Flmngr.load(...) before.
// The same for other methods like Flmngr.upload(...), Flmngr.edit(...), etc.
isMultiple: false, // let selecting a single file
onFinish: (files) => {
console.log("User picked:");
console.log(files);
}
});
Samples
There are various samples of JS file manager API usage:
-
JS Component: Select Single Image
-
JS Component: Manage Image Gallery
-
JS Component: File Browser
-
Select Single Image in Dialog
-
Select Image with Preview
-
Manage Image Gallery
-
Select Multiple Files
-
Browse Folder
-
Upload Files
-
Rename Files on Upload
-
Open Image Editor
-
Edit Image and Save as Base64
-
Event Listeners