When to use
If you want to respond to file operations or track them in your app, you can use Flmngr’s event listeners feature.
Whenever a user uploads a file, deletes one, moves a directory, or performs similar actions, your application will receive an event containing the details of that action.
How it works
The eventListeners parameter can be passed to both main methods: Flmngr.open({params}) and Flmngr.mount(el, {params}).
You can also define eventListeners when preloading Flmngr with Flmngr.load({params}). In this case, all listeners will be active for every subsequent file manager dialog or component, so you don’t need to pass them again to open() or mount(). This sample demonstrates that approach.
The parameter expects a set of callback functions; refer to the sample code for specifics.
Each listener receives a data object describing the action. You can inspect this object to get details about the user’s activity.
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.load({
apiKey: "FLMN24RR1234123412341234",
urlFileManager: 'https://fm.flmngr.com/fileManager',
urlFiles: 'https://fm.flmngr.com/files',
eventListeners: {
onFileUploaded: (data) => {
console.log("onFileUploaded:");
console.log(data);
},
onFileDeleted: (data) => {
console.log("onFileDeleted:");
console.log(data);
},
onFileRenamed: (data) => {
console.log("onFileRenamed:");
console.log(data);
},
onFileMoved: (data)=> {
console.log("onFileMoved:");
console.log(data);
},
onFileCopied: (data) => {
console.log("onFileCopied:");
console.log(data);
},
onDirCreated: (data) => {
console.log("onDirCreated:");
console.log(data);
},
onDirRenamed: (data) => {
console.log("onDirRenamed:");
console.log(data);
},
onDirMoved: (data) => {
console.log("onDirMoved:");
console.log(data);
},
onDirCopied: (data) => {
console.log("onDirCopied:");
console.log(data);
},
onDirDeleted: (data) => {
console.log("onDirDeleted:");
console.log(data);
},
}
}, {
onFlmngrLoaded: () => {
attachOnClickListenerToButton();
}
});
function attachOnClickListenerToButton() {
let elBtn = document.getElementById("btn");
// Style button as ready to be pressed
elBtn.style.opacity = 1;
elBtn.style.cursor = "pointer";
let elLoading = document.getElementById("loading");
elLoading.parentElement.removeChild(elLoading);
// Add a listener for selecting files
elBtn.addEventListener("click", () => {
selectFiles();
});
}
function selectFiles() {
Flmngr.open({
isMultiple: null, // do not allow to pick files and close the dialog then
acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
onFinish: (files) => {
showSelectedImage(files);
}
});
}
function showSelectedImage(files) {
let elImages = document.getElementById("images");
elImages.innerHTML = "";
let file = files[0];
let el = document.createElement("div");
el.className = "image";
elImages.appendChild(el);
let elImg = document.createElement("img");
elImg.src = file.url;
elImg.alt = "Image selected in Flmngr";
el.appendChild(elImg);
let elP = document.createElement("p");
elP.textContent = file.url;
el.appendChild(elP);
}<h2 class="mb-4">Flmngr: Event Listeners</h2>
<p>
The file manager prints information about any action that creates or modifies a file or directory into the browser console.
<br/>
<b>Press F12 to see it.</b>
</p>
<div id="btn" class="btn btn-primary btn-lg" style="opacity:0.2;cursor:default">Open File Manager</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>body {
padding: 20px;
background-color: #F4F4F4;
}
h2 {
font-weight: bold;
}