React Filemanager-u2pm

A modern, flexible file manager React component powered by a PHP backend API. Designed for use in content management systems, custom editors, and file-based workflows.

Features

• Folder navigation (click and breadcrumb)
• View folders, images
• Create, delete, rename files and folders
• Multi-image selection with callback
• Ideal for use with editors (e.g., TinyMCE Quill)
• Simple PHP backend (API-style api.php)

Installation

npm install filemanager-u2pm

If you don't have it in your project, you need to install it.

npm i i18next, react-i18next, primereact, primeicons and axios

import React from 'react'; import { FileManager } from 'filemanager-u2pm'; import 'primereact/resources/themes/lara-dark-purple/theme.css'; import 'primereact/resources/primereact.min.css'; // See more primerect Theme https://primereact.org/theming/

const App = () => { const handleSelectedImages = (images) => { console.log('Selected images:', images); // Send selected images to your editor };

return ( <FileManager apiUrl="https://yourdomain.com/api.php" selectedImages={[]} onSelectImages={handleSelectedImages} language= 'en' /> ); };

export default App;

| Prop | Type | Description | | ---------------- | ------------------ | ---------------------------------------------- | | apiUrl | string | URL to your PHP backend (api.php?action=...) | | selectedImages | array | Array of pre-selected image paths (optional) | | onSelectImages | (images) => void | Callback when user selects one or more images |

switch ($_POST['action']) { case 'readFolder': // Return folder and file list as JSON break; case 'deleteFolder': // Delete a folder and return status break; case 'upload': // Handle file uploads break; // etc. }

Download PHP API filemanager: www.u2pm/download/filemanager.zip

File Operations Supported List folders and files

Create folder

Delete folder

Rename folder

Upload image

Delete file

Select multiple files (images only)

Tech Stack React 18+

PHP (backend)

Axios (HTTP)

📄 License MIT © [Chabrija U2PM Team]