Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/themexpert/react-filemanager
https://github.com/themexpert/react-filemanager
filesystem image-processing javascript mediamanager react reactjs
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/themexpert/react-filemanager
- Owner: themexpert
- Created: 2018-01-29T07:00:09.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-01-14T07:26:13.000Z (almost 4 years ago)
- Last Synced: 2024-04-24T16:38:15.002Z (7 months ago)
- Topics: filesystem, image-processing, javascript, mediamanager, react, reactjs
- Language: JavaScript
- Size: 246 KB
- Stars: 7
- Watchers: 7
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
README
# ABANDONED!
You can still fork this repository, workout the missing dependencies and extend or/and you can check out [the new file manager](https://github.com/reactfilemanager) we are working on.
React based file and media manager developed for [Quix Page Builder](https://www.themexpert.com/quix-pagebuilder) and open sourced by [ThemeXpert](https://www.themexpert.com) 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
```JS
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'babel?stage=0',
include: [].concat(your_project_dirs, [fs.realpathSync(path.resolve(__dirname, './node_modules/@themexpert/react-filemanager/'))])
}
]
}
```
```JS
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
```html
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"
}
};
Open File Manager
```
```JS
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:
```JS
import initFM from 'react-filemanager'
export default initFM('server-endpoint');
```
Use the wrapper in any React component
```JS
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 (
Pick File
);
};
}
```