Install Flmngr JavaScript snippet (legacy)
This is an old style way to connect Flmngr. It will return an old API with an ability to get a new API. But please consider using the new version of the snippet returning the new API directly or better (if possible) compile your app with NPM package instead of a snippet.
Despite we recommend to migrate to NPM package or the new version of the snippet, using of this legacy snippet will be also supported.
Include the script
To call file manager on your pages, please include its scripts into HTML:
<script src="https://cloud.n1ed.com/v/latest/sdk/flmngr.js?apiKey=FLMN24RR1234123412341234"></script>
<script src="https://cloud.n1ed.com/v/latest/sdk/imgpen.js?apiKey=FLMN24RR1234123412341234"></script>
Install the backend
You also need to install file manager backend somewhere on your server.
Get access to API
When the scripts are loaded, the new API will exist in
window.flmngr.getNewAPI()
The legacy API can be accessed via window.flmngr
variable.
If you wish to use Flmngr as early as it possible (when loaded), please set one of this callbacks before you add the scripts to the page: onFlmngrAndImgPenLoaded
or onFlmngrLoaded
.
Call the file manager
Here is a full sample of how to load Flmngr and open its window to let user pick a file:
<script>
window.onFlmngrLoaded = function() {
// Get a new Flmngr API
const Flmngr = window.flmngr.getNewAPI();
// Now we can use this object as many times we need
// In this example we show how to call file manager dialog to select images
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);
}
});
}
// You can use window.flmngr.getNewAPI() here too,
// just check that the variable window.flmngr exists:
// it exists only after the scripts are loaded.
</script>
<!-- It's important to define listener before loading scripts -->
<script src="https://cloud.n1ed.com/v/latest/sdk/flmngr.js?apiKey=FLMN24RR1234123412341234"></script>
<script src="https://cloud.n1ed.com/v/latest/sdk/imgpen.js?apiKey=FLMN24RR1234123412341234"></script>
The calls above are documented in API section of this website. This sample uses Flmngr.open(...)
. method which opens the file manager.
As you can see an example above uses demo server to store the files. Install server side of Flmngr and link file manager with it. You need to change urlFileManager
and urlFiles
parameters from for that.
Sample
There is also a live demo on our website: