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/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.n1ed.com/cdn/FLMNFLMN/imgpen.js"></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: "FLMNFLMN",                                  // 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/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.n1ed.com/cdn/FLMNFLMN/imgpen.js"></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:

Open file manager