When to use
Embedding a file manager with all the standard features into your React application is a common requirement for many web-based CMS platforms and services.
Such a component can be placed alongside other UI components, which may also control when the file manager shows or hides.
The React file manager component allows users to browse all files, organize them, upload new ones, and edit images.
The component fills the available area, making it adaptable to UI layouts of any width.
How it works
By default, the <FlmngrPanel> React component mounts to a specified element, usually a <div>, and renders the file manager.
This is the simplest way to use the file manager in a React application.
Additionally, this page demonstrates a custom wrapper component that shows how the file manager behaves when resized. In your application, you can place the file manager inside a responsive/adaptive component or keep it at a fixed width.
This sample is also available for applications without React.
How to start using
Use this code in your React application by installing the React file manager component from NPM.
Both JavaScript and TypeScript are supported; the latter includes .d.ts definitions right in the package.
The package not only provides a file manager panel as a React component, but also exposes the Flmngr API for calling dialogs.
import {Flmngr, FlmngrPanel} from "@flmngr/flmngr-react";
import React from 'react@18.2.0';
import ReactDOM from 'react-dom@18.2.0';
ReactDOM.render(
<FlmngrPanel
apiKey="FLMN24RR1234123412341234"
urlFileManager="https://fm.flmngr.com/fileManager"
urlFiles="https://fm.flmngr.com/files"
/>,
document.getElementById("flmngr-panel")
);<h2>Flmngr: React File Browser Component</h2>
<div id="flmngr-panel" style="width:1200px;height:600px">
</div>
<p style="font-size:14px">
You can test resizing using the drag widget at the bottom-right part of the custom wrapper.<br/>
It doesn't belong to the widget itself, but it illustrates Flmngr's ability to fit the container.
</p>body {
padding: 20px;
background-color: #F4F4F4;
}
h2 {
font-weight: bold;
}
#flmngr-panel {
box-sizing: border-box;
position: relative;
overflow: hidden;
resize: both;
padding: 20px;
background: #CCC;
}
#flmngr-panel:before {
content: "Loading...";
position: absolute;
top: 50%;
left: calc(50% - 50px);
width: 100px;
text-align: center;
}