Individual Folders for Different Users or Websites

When using a multisite CMS or app, each site has an individual set of files and images used in their page content. Therefore, it is critically important to isolate users of these websites in their own directories using a structure like this:

Path on disk

Set as dirFiles in the server config file

/var
    /www
        /files
            /user-1
            /user-2
            /user-3
            ...

Access from web

Set as Files URL in the Dashboard or Flmngr.urlFiles in the client config file

https://example.com/files/user-1/
https://example.com/files/user-2/
https://example.com/files/user-3/
...

Note: These instructions relate to the self-hosted file manager script installation. If you use any cloud storage (Amazon S3 or Azure Blob), please refer to the instructions provided to you directly.

Client-side parameters

There are two parameters in the Dashboard that are responsible for working with URLs:

File Manager URLURL of your PHP/Node script that processes
Parameter name: Flmngr.urlFileManager

Files URLURL prefix of the directory with static files available from web
Parameter name: Flmngr.urlFiles

When you have just one website, you can specify the parameters manually directly in the Dashboard interface. However, with multiple websites, especially as the number grows, you need to define the parameters dynamically.

The most common strategy is to have a single File Manager URL for everyone, which will serve requests from any website user and distinguish between directories on the fly according to cookies or other authentication data you use to access the backoffice of your CMS.

At the same time, each website will have a different Files URL prefix. These will be respected when the editor forms URLs for newly inserted images.

When you initialize N1ED (either as a standalone editor or as a plugin to CKEditor or TinyMCE), simply override these parameters at the start:

NPM

import Flmngr from "flmngr";

let userId = getUserId(); // your function

Flmngr.open({
    apiKey: "your-n1ed-api-key",
    urlFileManager: 'https://example.com/flmngr/flmngr.php', 
    urlFiles: 'https://example.com/files/user-' + userId,
    isMultiple: false,                                   
    onFinish: (files) => {
        console.log("User picked:");
        console.log(files);
    }
});

React

import Flmngr from "@flmngr/flmngr-react";
import * as React from "react";

export class MyButton extends React.Component {

    render() {
        return <button 
            onClick={() => {
                let userId = getUserId(); // your function

                Flmngr.open({
                    apiKey: "your-n1ed-api-key",
                    urlFileManager: 'https://example.com/flmngr/flmngr.php', 
                    urlFiles: 'https://example.com/files/user-' + userId,   
                    isMultiple: false,                            
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }}
        >
            Open file manager
        </button>
    }

}

Snippet

<script>
    let userId = getUserId(); // your function

    // Set the listener first: the script below calls it as soon as it has loaded
    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: "your-n1ed-api-key",
            urlFileManager: 'https://example.com/flmngr/flmngr.php',
            urlFiles: 'https://example.com/files/user-' + userId,
            isMultiple: false,                                   
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
</script>
<script src="https://unpkg.com/flmngr"></script>

TinyMCE

<textarea id="editor"></textarea>
<script>
    let userId = getUserId(); // your function

    tinymce.init({
        selector: "#editor",
        plugins: "n1ed",
        apiKey: "your-n1ed-api-key",
        Flmngr: {
            urlFileManager: 'https://example.com/flmngr/flmngr.php',
            urlFiles: 'https://example.com/files/user-' + userId,   
        }
    });  
</script>

CKEditor 4

<textarea id="editor"></textarea>
<script>
    let userId = getUserId(); // your function

    CKEDITOR.replace("editor", {
        extraPlugins: "N1ED-editor",
        apiKey: "your-n1ed-api-key",  
        // Alternatively you can define these options inside 'config.js'
        // as config.Flmngr = { ... };
        Flmngr: {
            urlFileManager: 'https://example.com/flmngr/flmngr.php', 
            urlFiles: 'https://example.com/files/user-' + userId,    
        }
    });
</script>

CKEditor 5

ClassicEditor.create(
    document.querySelector('#editorId'), 
    {
        apiKey: "your-n1ed-api-key",
        Flmngr: {
            urlFileManager: 'https://example.com/flmngr/flmngr.php', 
            urlFiles: 'https://example.com/files/user-' + userId,  
        }

    } 
).then( 
    (editor) => {
        editor.getFlmngr(
            (Flmngr) => {
                // Flmngr argument contains Flmngr API, 
                // for example you can open the file manager and let user pick a file:
                Flmngr.open({
                    // There is no need to set 'apiKey', 'urlFileManager' or 'urlFiles' here
                    // due to you already set them in the config of CKEditor.
                    isMultiple: false,
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }
        );
    } 
).catch((error) => {});

Froala

let userId = getUserId(); // your function

FroalaEditor('#editor', {
    Flmngr: {
        apiKey: "your-n1ed-api-key", 
        urlFileManager: 'https://example.com/flmngr/flmngr.php',
        urlFiles: 'https://example.com/files/user-' + userId,
    }
});

Backend

When using a PHP backend, you can use this sample code to call the Flmngr server-side component:

$userId = ... // get it yourself

FlmngrServer::flmngrRequest(
    array(
        'dirFiles' => '/var/www/files/user-' . $userId,
    )
);