
Security News
Vite Releases Technical Preview of Rolldown-Vite, a Rust-Based Bundler
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
@themexpert/react-filemanager
Advanced tools
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.
React based file and media manager developed for Quix Page Builder and open sourced by ThemeXpert team.
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
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');
The returned callback openFileManager
accepts a callback
as a parameter to show the file manager modal
<button onclick="openFileManager(fileSelectCallback)">Open File Manager</button>
function fileSelectCallback(selected_list) {
console.log(selected_list);
//do whatever
//path => the relative path to the root path set in `app/FM/config.php`
//selected_list => selected files and folders
//return true to close the modal
//return string to show info/error after validation
//let's say we want user to select only one file
if(selected_list.length !== 1) {
return 'Only one file has to be selected';
}
//let's say the user selected a folder which is not good for us
if(selected_list[0].is_dir) {
return 'Only file can be selected';
}
//we got one file selected her
// //do whatever
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-client'
export default initFM('server-endpoint');
Use the wrapper in any React component
import React, {Component} from 'react'
import openFileManager from './wrapper' //wherever it is
export default class FilePicker extends Component {
constructor(props) {
super(props);
this.state = {
filename: null
};
}
onFileSelect = (files) => {
//we want the user to select at least one file
if(!files.length)
return 'Please select a file';
//we want the user to select less or equal to one file
if(files.length > 1) {
return 'Only one file can be selected';
}
//which implies user selected one file by this line of code
//relative path to the root of file manager set in the server side config
console.log(files);
return true; //closes the file manager modal
};
render = () => {
return (
<button onClick={openFileManager(this.onFileSelect)}>Pick File</button>
);
};
}
FAQs
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.
The npm package @themexpert/react-filemanager receives a total of 0 weekly downloads. As such, @themexpert/react-filemanager popularity was classified as not popular.
We found that @themexpert/react-filemanager demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.