When to use
A classic file browser and manager for your server — one of the most common tasks. This component allows you to browse directories and files, reorganize them, upload new files, modify existing ones, and delete files as needed.
In this configuration, the file manager component does not wait for the user to select a file and close the file manager. Instead, it provides a full set of file manipulation tools, and your outer application can decide whether to close it at some point or keep it open indefinitely.
How it works
This sample illustrates the most basic and straightforward usage of the Flmngr.mount(el, {params}) method of the File Manager API.
You only need to specify an HTML element that already exists in the DOM tree, and Flmngr will mount there.
If you use React, there is a React file browser sample.
How to start using
Use this code in a custom application when you install the React file manager component or the JavaScript file manager package from NPM.
If your app doesn't use NPM at all, you can quickly install the file manager JS snippet instead.
These packages provide a powerful Flmngr API, which this and other code samples demonstrate.
import {Flmngr} from "flmngr";
Flmngr.mount(
document.getElementById("file-manager"),
{
apiKey: "FLMN24RR1234123412341234",
urlFileManager: "https://fm.flmngr.com/fileManager",
urlFiles: "https://fm.flmngr.com/files"
}
);<h2>Flmngr: File Browser Component</h2>
<div id="file-manager" style="width:1200px;height:600px"/>
<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;
}