Install React file manager

The React file manager is based on the Flmngr NPM package. At this moment, it simply reexports everything from the original package, but in the future, it will have specific features related to React.

We recommend you start with this derivative package if you need to implement a file manager in your React app.

Get the NPM package

The first step is to download the NPM package into your app. Go into your project and run there in the console:

Using NPM:

npm i --save @flmngr/flmngr-react

Using Yarn:

yarn add @flmngr/flmngr-react

Install the backend

You also need to install file manager backend somewhere on your server.

Call Flmngr from your code

Now you can import Flmngr namespace (default namespace of the package) and use it:

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

export class MyButton extends React.Component {

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

                Flmngr.open({
                    apiKey: "FLMN24RR1234123412341234",                  // default free key
                    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
                    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
                    isMultiple: false,                                   // let selecting a single file
                    acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }}
        >
            Open file manager
        </button>
    }

}

This is the sample of just one case - when you need to open the file manager and wait until the user picks some file and receive these files in a callback after the dialog is closed. Flmngr.open({params}) is used for this.

There are many other different available methods described in the API reference section. Live code samples are provided.

Sample

There is also a live demo on our website:

Open file manager

Optimization

The Flmngr NPM package loads a minimal part of Flmngr. Most of its components (file manager and image editor) will be automatically loaded from the official CDN on the first call of some method.

In order to have no delay on a such first call, please consider preloading Flmngr using Flmngr.load({params}).

This load will not only preload the file manager and image editor from CDN, but also preconfigure them. After passing some parameters into this function you should not include these parameters in any other calls until wish to override them.

We strongly recommend you use this preload call and include to there these parameters:

• apiKey - your API key. The only really required parameter, is not overridable.
• urlFileManager - URL of your PHP backend of the file manager. Recommended, can be overridden in future calls.
• urlFiles - URL of where your files are located. Recommended, can be overridden in future calls.

So the optimized code will be:

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

// Starts async loading Flmngr code from CDN (this is non-blocking action)
Flmngr.load({
    apiKey: "FLMN24RR1234123412341234",                  // default free key
    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
});

export class MyButton extends React.Component {

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

                Flmngr.open({
                    // Do not specify parameters already passed into Flmngr.load(...) before.
                    // The same for other methods like Flmngr.upload(...), Flmngr.edit(...), etc.
                    isMultiple: false,                                   // let selecting a single file
                    acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }}
        >
            Open file manager
        </button>
    }

}