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.
Install
npm install --save @alckor127/react-filemanageror
yarn add @alckor127/react-filemanagerUsage
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 AppAPI 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 valueformikto indicate to the hook that it should be integrated withformik, in case it is assigned the valueformik, please note thatsetFieldValuemust also beformik.
<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
License
MIT © Alckor127 2020