Install Flmngr JavaScript snippet

This is a snippet for a legacy project which requires including Flmngr right into the HTML page. More modern way if you have some JavaScript/TypeScript application that can import the NPM package of Flmngr.

So if you can not import the NPM package by Webpack directly in the app, use this snippet which makes the same directly on the page: adds the API from Flmngr NPM package into the global window.Flmngr variable of a browser. You can use it just like you would import it from the NPM package.

Include the script

Embed this URL script into HTML:

<script src="https://unpkg.com/flmngr"></script>

Alternatively, you can use https://cdn.skypack.dev/ (or another CDN) instead of https://unpkg.com/ CDN service.

Install the backend

You also need to install the file manager backend somewhere on your server.

Get access to API

When Flmngr is loaded it will place the file manager API into the global variable:

window.Flmngr

Check it for existence before using, or wait for a callback (see below).

When you wish to call some action of Flmngr as early as it possible, please set this listener before you include the script:

window.onFlmngrAPILoaded = () => {
    // Use window.Flmngr here to call the file manager
}

Or if you can load the script in different fragments of one page and worry their listeners will overwrite each other, just add listeners in the array:

if (!window.onFlmngrAPILoadedArray)
    window.onFlmngrAPILoadedArray = [];
window.onFlmngrAPILoadedArray.push(() => {
    // Use window.Flmngr here to call the file manager
});

Call the file manager

Now you can execute any method of Flmngr. Here is a full sample:

<script src="https://unpkg.com/flmngr"></script>
<script>
    window.onFlmngrAPILoaded = function() {
        // Now we can use window.Flmngr object
        // In this example we show how to call file manager dialog to select images 
        window.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 here too, 
    // just check that the script form "unpkg.com" was loaded
    // (check window.Flmngr exists).
</script>

The calls above are documented in the API section of this website. This sample uses Flmngr.open(...) method which opens the file manager.

As you can see the example above uses a demo server to store the files. Install the server side of Flmngr and link the file manager with it. You need to change the urlFileManager and the urlFiles parameters from for that.

Sample

There is also a live demo on our website:

Open file manager