
Research
Security News
The Growing Risk of Malicious Browser Extensions
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
@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.
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.
Research
Security News
Socket researchers uncover how browser extensions in trusted stores are used to hijack sessions, redirect traffic, and manipulate user behavior.
Research
Security News
An in-depth analysis of credential stealers, crypto drainers, cryptojackers, and clipboard hijackers abusing open source package registries to compromise Web3 development environments.
Security News
pnpm 10.12.1 introduces a global virtual store for faster installs and new options for managing dependencies with version catalogs.