Browse a folder

This sample demonstrates a usage of a new Flmngr API. The sample of legacy API usage can be found here.

Play on CodePen All samples on CodePen External link

Demo

HTML

JavaScript

CSS

<div class="loading-full-screen">
  <div id="loading">Loading folder listing...</div>
</div>

// In real app replace with:
// import Flmngr from "flmngr";
import Flmngr from "https://cdn.skypack.dev/flmngr";

Flmngr.load({
  apiKey: "FLMNFLMN",
  urlFileManager: 'https://fm.n1ed.com/fileManager',
  urlFiles: 'https://fm.n1ed.com/files'
}, {
  onFlmngrLoaded: () => {
    attachFileManager();
  }
});

function attachFileManager() {
  let elLoading = document.getElementsByClassName("loading-full-screen")[0];
  elLoading.parentElement.removeChild(elLoading);

  Flmngr.open({
    isMultiple: null,
    isMaximized: true,
    showCloseButton: false,
    showMaximizeButton: false,
    hideFiles: [
      "index.php",
      ".htaccess",
      ".htpasswd"
    ],
    hideDirs: [
      "vendor"
    ],
  });
}

body {
  padding: 20px;
  background-color: #F4F4F4;
}

.loading-full-screen {
  widht: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

File manager can be called not in the mode of a picker, but in the mode of a manager. This means the user won't be able to pick any file (he can select files, but the file manager can not be closed by picking some file).

The typical case is to show file and directory listing and to let an administrator manage the files.

Flmngr file manager can be easily configured to browse the desired directories. It can be loaded on page start or after clicking on some button and remove an option to pick any file.

To turn Flmngr into no-pick mode please set isMultiple parameter of Flmngr.open({params}) to null (not to true or false), so there will be allowed no single or multiple picking of files (which leads to closing the editor and returning selected files), but will just show the file browser.

The special case is when you want just to place Flmngr into some directory and act as an index page with all file/folder manipulation tools. When used in this way Flmngr will also maximize and hide close/maximize buttons of itself (set parameters showCloseButton and showMaximizeButton to false). isMaximized parameter handles the default window state.

Do not forget that Flmngr will allow you full access to a file system is is configured to manage. So please consider protecting this page from anonymous visitors i. e. by configuring HTTP basic auth in your Apache/Nginx or implementing own both client-side and server-side checks (reuse such check of your CMS if this is possible).

NPM

React

Snippet

TinyMCE

CKEditor 4

CKEditor 5

import Flmngr from "flmngr";

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: null,                                    // no file pick mode
    isMaximized: true,                                   // open maximized
    showCloseButton: false,                              // without close button
    showMaximizeButton: false                            // without minimize button
});

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

export class MyButton extends React.Component {

    render() {
        return <button 
            onClick={() => {

                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: null,                                    // no file pick mode
                    isMaximized: true                                    // open maximized
                });
            }}
        >
            Open file manager
        </button>
    }

}

<script src="https://unpkg.com/flmngr"></script>
<script>
    window.onFlmngrAPILoaded = function() {
        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: null,                                    // no file pick mode
            isMaximized: true,                                   // open maximized
            showCloseButton: false,                              // without close button
            showMaximizeButton: false                            // without minimize button
        });
    }
</script>

// TinyMCE was initialized somewhere before
tinymce.activeEditor.getFlmngr(
    (Flmngr) => {
        Flmngr.open({
            // Do not specify here 'apiKey', 'urlFileManager' and 'urlFiles' again
            // (they were passed in initialization code)
            isMultiple: null,                                    // no file pick mode
            isMaximized: true,                                   // open maximized
            showMaximizeButton: false                            // without minimize button
        });
    }
);

// CKEditor was initialized somewhere before
CKEDITOR.instances["editor"].getFlmngr(
    (Flmngr) => {
        Flmngr.open({
            // Do not specify here 'apiKey', 'urlFileManager' and 'urlFiles' again
            // (they were passed in initialization code or in 'config.js')
            isMultiple: null,                                    // no file pick mode
            isMaximized: true,                                   // open maximized
            showMaximizeButton: false                            // without minimize button
        });
    }
);

ClassicEditor.create(
    document.querySelector('#editorId'), 
    {
        Flmngr: {
            apiKey: "FLMNFLMN",                                  // default free key
            urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
            urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
        }
    } 
).then( 
    (editor) => {
        editor.getFlmngr(
            (Flmngr) => {
                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: null,                                    // no file pick mode
                    isMaximized: true,                                   // open maximized
                    showMaximizeButton: false                            // without minimize button
                });
            }
        );
    } 
).catch((error) => {});