Browse Folder

The typical case is to show a file and directory listing and allow an administrator to manage the files. There are two approaches to do this — opening a dialog (a full-screen one, as in this sample) or mounting a component somewhere in your app. The latter is illustrated with a file browser sample.

Here, we open the dialog on page load, but you can also attach it to a button.

In this mode, the file manager is not used for picking files, but rather acts as a file browser or manager. This means the user cannot pick files for returning to another application: they can select files only for management purposes, not for closing the dialog and returning a set.

To set Flmngr to no-pick mode, set the isMultiple parameter of the Flmngr.open({params}) method to null (not true or false). This disables both single and multiple file picking (which normally closes the editor and returns selected files) and simply shows the file browser.

A special case is when you want to place Flmngr in a directory and use it as an index page with all file and folder management tools. In this mode, Flmngr will also maximize and hide its close/maximize buttons (set showCloseButton and showMaximizeButton to false). The isMaximized parameter controls the default window state.

Remember that Flmngr provides full access to the file system it is configured to manage. Protect this page from anonymous visitors, for example, by configuring HTTP basic authentication in Apache/Nginx or implementing both client-side and server-side checks (reuse your CMS checks if possible).

Use this code in a custom application when you install the React file manager component or the JavaScript file manager package from NPM.

If your app doesn't use NPM at all, you can quickly install the file manager JS snippet instead.

These packages provide a powerful Flmngr API, which this and other code samples demonstrate.