Separating file and image storages for different websites

When using a multisite CMS, 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

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

Access from web




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, Azure BLOB, etc.), 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

React

Snippet

TinyMCE

CKEditor 4

CKEditor 5

Froala

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);
    }
});

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>
    }

}

<script src="https://unpkg.com/flmngr"></script>
<script>
    let userId = getUserId(); // your function

    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>

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

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

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

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

ClassicEditor.create(
    document.querySelector('#editorId'), 
    {

        Flmngr: {
            apiKey: "your-n1ed-api-key",
            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) => {});

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,
    )
);