When to use
Attach the file manager anywhere in your React app.
This sample demonstrates mounting a React file manager component that lets the user select an image and displays its URL.
Other samples show how to select and manage an image set and run it as a file browser without picking a file.
How it works
The React component FlmngrPanel allows you to mount the File Manager anywhere in your React app.
Internally, it uses the Flmngr.mount(el, {params}) method of the File Manager API. You should pass the same params properties to the component as described in the mount method.
The onFinish callback will return the files, letting you decide what to do with the File Manager panel in your app. You can close the panel after a file is picked or keep it open so the user can modify their selection.
There is also a non-React version of this sample.
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';
class MyComponent extends React.Component {
state = {
urlSelected: null
}
render() {
return <div style={{width:"100%",height:"100%"}}>
{
this.state.urlSelected
?
<p id="files">
Selected URL: <code>{this.state.urlSelected}</code>
</p>
:
<p id="files">
No files selected
</p>
}
<div style={{width: "1100px", height: "600px"}}>
<FlmngrPanel
apiKey="FLMN24RR1234123412341234"
urlFileManager="https://fm.flmngr.com/fileManager"
urlFiles="https://fm.flmngr.com/files"
isMultiple={false /* Crucial to allow picking a file*/}
onFinish={(
files: {
url: string,
formats: {
format: string,
url: string
}[]
}[]
) => {
this.setState({
urlSelected: files[0].url
});
}}
/>
</div>
</div>;
}
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('root')
);<h2>Flmngr: React File Manager Component for Selecting a Single File</h2>
<div id="root">
Mounting the component...
</div>body {
padding: 20px;
background-color: #F4F4F4;
}
h2 {
font-weight: bold;
}
#files {
display: flex;
align-items: center;
}
code {
color: black;
background-color: white;
border: 1px solid #AAA;
padding: 3px 6px;
margin-left: 8px;
}