Browse a folder

CodePen example /at the bottom of this page/

The popular task - showing file listing of some directory and allowing an administrator to manage these files.

Flmngr file manager can be easily configured to browse desired directory. It can be loaded on page start or after click on some button and remove an option to pick any file, so the file manager won't be close after user selects some file.

The main parameter you need to know here is isMultiple: null.

It will turn Flmngr into the mode when there is 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.

When you create Flmngr instance please add isMaximized value:

let flmngr = window.flmngr.create({
  urlFileManager: 'https://fm.n1ed.com/fileManager',
  urlFiles: 'https://fm.n1ed.com/files',
  isMaximized: true
});

Then pass isMultiple parameter to pickFiles function:

flmngr.pickFiles({
  isMultiple: null
});

Using as index.php

The special case when you want just to place Flmngr into some directory and act as index page with all file/folder manipulation tools. When used in this way Flmngr will also maximize and hide close/maximize buttons of itself. To use it add more options to creation method call:

let flmngr = window.flmngr.create({
  urlFileManager: 'https://fm.n1ed.com/fileManager',
  urlFiles: 'https://fm.n1ed.com/files',
  isMaximized: true,
  showCloseButton: false,
  showMaximizeButton: false
});

Then call pickFiles as before.

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 server-side check inside index.php.

CodePen example

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

<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/imgpen.js"></script>
window.onFlmngrAndImgPenLoaded = function() {

  var elLoading = document.getElementsByClassName("loading-full-screen")[0];
  elLoading.parentElement.removeChild(elLoading);

  let flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files',
    isMaximized: true,
    showCloseButton: false,
    showMaximizeButton: false,
    hideFiles: [
      "index.php",
      ".htaccess",
      ".htpasswd"
    ],
    hideDirs: [
      "vendor"
    ],
  });
  flmngr.pickFiles({
    isMultiple: null,
  });

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

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