Different storages for multiple users

Premium feature

Note: Each website usually has only one storage and all the users browse the same directory. Using different per-user storages usually (but not always) means they actually edit different websites and separate Premium licenses should be used in such cases (see Licensing). If you build SaaS where different users need to have individual storage, please contact us first to check can you use multiple storage for free or separate licenses are required. Without an additional agreement the license grants only one storage per website.

Sometimes when you have multiple users on your website (on your app) there are two ways to manage your storage:

All users have one folder they manage (usually on small websites).
Each user has an individual directory it uploads to (used for isolating users on SaaS apps or on big websites).

This article describes the second approach.

Configure user directories

In order to give to each user a separate directory, you need some code that will change the configuration of Flmngr based on the user ID.

For example, each user has a login used in your system as a directory name, for example, your structure can look like:

files/
   user1/
   user2/
   ...

There are two places where you need to specify the user's folder: on the backend (directory dirFiles - where files are placed) and on the frontend (parameter urlFiles - how to generate URLs of selected files).

Server-side code sample

Find the right place in a controller handling file manager and change configuration passed into flmngrRequest() call:

// Get string unique ID of the current user by a way your CMS/framework provides. 
$userId = ...   

// Substitute it into the configuration
FlmngrServer::flmngrRequest(
    array(
        // Directory of your files storage
        'dirFiles' => '/var/www/files/' . $userId,

        // Optionally: if you wish to use separate directory for cache files
        // This is handy when your "dirFiles" is slower a local disk,
        // for example this is a drive mounted over a network.
        //'dirCache' => '/var/www/cache' . $userId,
    )
);

Map directories to URLs

After setting user directories you need to explain to the file manager how to generate URLs for selected files.

Pass the config depending on your integration:

NPM

React

Snippet

TinyMCE

CKEditor 4

CKEditor 5

Froala

import Flmngr from "flmngr";

// Get string unique ID of the current user by a way your CMS/framework provides. 
// Usually this can be found in Cookies.
// This value must be equal to "userId" you pass on the backend.
let userId = getUserId(); // your function

Flmngr.open({
    apiKey: "FLMN24RR1234123412341234",                                       // your API key here
    urlFileManager: 'https://example.com/scripts/flmngr.php', // your Flmngr backend
    urlFiles: 'https://example.com/files/user' + userId,      // build URL of the user
    isMultiple: false,                                        // let selecting a single file
    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={() => {
                // Get string unique ID of the current user by a way your app provides. 
                // This value must be equal to "userId" you pass on the backend.
                let userId = getUserId(); // your function

                Flmngr.open({
                    apiKey: "FLMN24RR1234123412341234",                                       // your API key here
                    urlFileManager: 'https://example.com/scripts/flmngr.php', // your Flmngr backend
                    urlFiles: 'https://example.com/files/user' + userId,      // build URL of the user
                    isMultiple: false,                                        // let selecting a single file
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }}
        >
            Open file manager
        </button>
    }

}

<script src="https://unpkg.com/flmngr"></script>
<script>
    // Get string unique ID of the current user by a way your CMS/framework provides. 
    // Usually this can be found in Cookies.
    // This value must be equal to "userId" you pass on the backend.
    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: "FLMN24RR1234123412341234",                                       // your API key here
            urlFileManager: 'https://example.com/scripts/flmngr.php', // your Flmngr backend
            urlFiles: 'https://example.com/files/user' + userId,      // build URL of the user
            isMultiple: false,                                        // let selecting a single file
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
</script>

<textarea id="editor"></textarea>
<script>
    // Get string unique ID of the current user by a way your CMS/framework provides. 
    // Usually this can be found in Cookies.
    // This value must be equal to "userId" you pass on the backend.
    let userId = getUserId(); // your function

    tinymce.init({
        selector: "#editor",
        plugins: "file-manager",
        Flmngr: {
            apiKey: "FLMN24RR1234123412341234",                                       // your API key here
            urlFileManager: 'https://example.com/scripts/flmngr.php', // your Flmngr backend
            urlFiles: 'https://example.com/files/user' + userId,      // build URL of the user
        }
    });  
</script>

<textarea id="editor"></textarea>
<script>
    // Get string unique ID of the current user by a way your CMS/framework provides. 
    // Usually this can be found in Cookies.
    // This value must be equal to "userId" you pass on the backend.
    let userId = getUserId(); // your function

    CKEDITOR.replace("#editor", {
        extraPlugins: "file-manager",
        // Alternatively you can define these options inside 'config.js'
        // as config.Flmngr = { ... };
        Flmngr: {
            apiKey: "FLMN24RR1234123412341234",                                       // your API key here
            urlFileManager: 'https://example.com/scripts/flmngr.php', // your Flmngr backend
            urlFiles: 'https://example.com/files/user' + userId,      // build URL of the user
        }
    });
</script>

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

        Flmngr: {
            apiKey: "FLMN24RR1234123412341234",                                       // your API key here
            urlFileManager: 'https://example.com/scripts/flmngr.php', // your Flmngr backend
            urlFiles: 'https://example.com/files/user' + userId,      // build URL of the user
        }

    } 
).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) => {});

// Get string unique ID of the current user by a way your CMS/framework provides. 
// Usually this can be found in Cookies.
// This value must be equal to "userId" you pass on the backend.
let userId = getUserId(); // your function

FroalaEditor('#editor', {
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234",                                       // your API key here
        urlFileManager: 'https://example.com/scripts/flmngr.php', // your Flmngr backend
        urlFiles: 'https://example.com/files/user' + userId,      // build URL of the user
    }
});