ABANDONED!

You can still fork this repository, workout the missing dependencies and extend or/and you can check out the new file manager we are working on.

React based file and media manager developed for Quix Page Builder and open sourced by ThemeXpert team.

Dependency

We've written a PHP library to handle all server side things. You need to include this to your project using composer. More information https://github.com/themexpert/react-filemanager-server

Usage

yarn add @themexpert/react-filemanager

npm -i @themexpert/react-filemanager

Webpack rules

        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    loader: 'babel?stage=0',
                    include: [].concat(your_project_dirs, [fs.realpathSync(path.resolve(__dirname, './node_modules/@themexpert/react-filemanager/'))])
                }

            ]
        }

import initFM from 'react-filemanager';

const openFileManager = initFM('server_endpoint');
// or
const openFileManager = initFM('server_endpoint', DOMElement);

The returned callback openFileManager accepts a callback as first parameter to show the file manager modal and an object config as second parameter.

In this way, you won't have to instantiate FileManager seperately for different config

const config  = {
                    //add filters, valid filters are [icon,image,video,dir]
                    //currently filters only filters the plugins, not the items
                    filters: "image,icon",

                    //add additional http get/post parameters
                    http_params: {
                        foo: "bar"
                    },

                    //add additional headers
                    headers: {
                        foo: "bar"
                    }
                };

<button onclick="openFileManager(fileSelectCallback, config)">Open File Manager</button> 

function fileSelectCallback(selection) {
    console.log(selection);
    return true; //close the modal
}

It's a good idea to make a wrapper to instantiate the file manager and the using it elsewhere

File: wrapper.js

Content:

import initFM from 'react-filemanager'

export default initFM('server-endpoint');

Use the wrapper in any React component

import React, {Component} from 'react'
import openFileManager from './wrapper' //wherever it is

const config  = {
                    //add filters, valid filters are [icon,image,video,dir]
                    filters: "image,icon",

                    //add additional http get/post parameters
                    http_params: {
                        foo: "bar"
                    },

                    //add additional headers
                    headers: {
                        foo: "bar"
                    }
                };

export default class FilePicker extends Component {
    constructor(props) {
        super(props);
    }
    
    onFileSelect = selection => {
    
        console.log(selection);
        
        return true; //closes the file manager modal
    };
    
    render = () => {
        return (
            <button onClick={openFileManager(this.onFileSelect, config)}>Pick File</button>
        );
    };
}