react-filemanager

Using as stand-alone responsive filemanager for react 🔥.

Requirements

Before starting using react-filemanager; download, install and configure responsive filemanager on an apache server.

• Download
• Documentation

Install

npm install --save @alckor127/react-filemanager

or

yarn add @alckor127/react-filemanager

Usage

import React, { useState } from 'react'
import { FileManager, useFileManager } from 'react-filemanager'

const App = () => {
  const [inputValue, setInputValue] = useState('')

  const setFieldValue = (val) => setInputValue(val)

  const filemanager = useFileManager({
    setFieldValue
  })

  return (
    <div>
      <input
        type='text'
        name='image'
        value={inputValue}
        onFocus={() => filemanager.handleFilemanager('image')}
        readOnly // is recommended
      />
      <FileManager
        domain='https://www.responsivefilemanager.com'
        target={filemanager.target}
        isOpen={filemanager.isOpen}
      />
    </div>
  )
}

export default App

API Reference

useFileManager()

A custom React Hook that returns states and helpers for using with FileManager component.

• isOpen - is a boolean state indicating whether or not to show the filemanager.
• target - is a string state indicating the input name.
• toggle() - is a trigger function that controls filemanager independent visibility.
• handleFileManager(target) - this function is the one that relates the behavior of the filemanager to the input. Requires that the input name be sent to it.

Setting

useFileManager, receive an object in the following format:

const [inputValue, setInputValue] = useState('')

const handleChangeInput = (val) => setInputValue(val)

const filemanager = useFileManager({
  setFieldValue: handleChangeInput
})

• setFieldValue - it is the function that must update the state of the input.
• plugin - it is not necessary to define it. Currently, you can assign the value formik to indicate to the hook that it should be integrated with formik, in case it is assigned the value formik, please note that setFieldValue must also be formik.

<FileManager />

Prop	Type	Required	Description
domain	String	✓	It is the domain where the responsive filemanager was installed and configured.
pathdialog	String		It is the path name of dialog.php file. Default is filemanager/dialog.php.
type	Integer		It is the default filter indicator: 1 (images files), 2 (all files) and 3 (video files). Default is 2.
crossdomain	Boolean		Set it to true if you want to enable cross-domain file selector.
target	String	✓	It is provided by useFileMananger().
isOpen	Boolean	✓	It is provided by useFileMananger().
width	Integer/String		Set it the width of responsive filemanager. Default is 100%.
height	Integer/String		Set it the height of responsive filemanager. Default is 500.

domain (required)

It is the domain where the responsive filemanager was installed and configured.

<FileManager
  domain='https://www.responsivefilemanager.com'
  target={filemanager.target} // useFileManager() return this value.
  isOpen={filemanager.isOpen} // useFileManager() return this value.
/>

pathdialog

We will assume that in the responsive filemanager configuration on the server, the path of the filemanager/dialog.php file is changed to the following: uploads/dialog.php.

<FileManager
  domain='https://www.responsivefilemanager.com'
  pathdialog='uploads/dialog.php'
  target={filemanager.target} // useFileManager() return this value.
  isOpen={filemanager.isOpen} // useFileManager() return this value.
/>

type

For example if you want to show only the video files, then type must be set with the value of 3.

<FileManager
  domain='https://www.responsivefilemanager.com'
  type={3}
  target={filemanager.target} // useFileManager() return this value.
  isOpen={filemanager.isOpen} // useFileManager() return this value.
/>

crossdomain

For example to enable the cross-domain file selector, you must set crossdomain to true.

<FileManager
  domain='https://www.responsivefilemanager.com'
  crossdomain
  target={filemanager.target} // useFileManager() return this value.
  isOpen={filemanager.isOpen} // useFileManager() return this value.
/>

target (required)

The value of target is obtained through the hook useFileManager.

const filemanager = useFileManager({
  setFieldValue: (val) => console.log(val)
})

<FileManager
  domain='https://www.responsivefilemanager.com'
  target={filemanager.target}
  isOpen={filemanager.isOpen}
/>

isOpen (required)

The value of isOpen is obtained through the hook useFileManager.

const filemanager = useFileManager({
  setFieldValue: (val) => console.log(val)
})

<FileManager
  domain='https://www.responsivefilemanager.com'
  target={filemanager.target}
  isOpen={filemanager.isOpen}
/>

Examples

• Basic
• Only filemanager control
• Integration with formik
• Use modal from reacstrap

License

MIT © Alckor127 2020