When to use
Folder names often end up in URLs of the files stored inside them, and spaces or other special characters turn into ugly %20 sequences there. When your storage policy requires clean, predictable folder names, you can enforce it right in the browser: whatever the user types, the folder is created with a normalized name.
The two hooks shown here cover both ways a folder gets its name — creating a new folder and renaming an existing one — so a naming policy set once applies to any folder the user manages, no matter whether the file manager was opened via a direct API call or from a content editor (N1ED, TinyMCE, or CKEditor).
How it works
The Flmngr.load({params}) API method supports the options hookBeforeCreateFolder and hookBeforeRenameFolder.
Each hook is called right before the corresponding action is sent to the server and receives the folder name the user entered as a plain string. Return a non-empty string to use it as the folder name instead; return nothing to keep the name as entered. The hooks can not cancel the operation.
In this sample both hooks apply the same rule — all whitespace is replaced with dashes — so creating a folder named My Photos actually creates My-Photos, and renaming a folder normalizes its new name the same way.
Unlike renaming files on upload, no File objects are involved here: folder names are just strings, so a hook simply returns the new value.
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://flmngr.democdn.com/file-manager-default',
urlFiles: 'https://flmngr.democdn.com/files/default',
// Both hooks receive the folder name the user entered as a plain string
// and return the name to actually use. Return nothing to keep the name as is.
hookBeforeCreateFolder: (name) => {
console.log("hookBeforeCreateFolder: " + name);
return name.replace(/\s+/g, "-");
},
hookBeforeRenameFolder: (name) => {
console.log("hookBeforeRenameFolder: " + name);
return name.replace(/\s+/g, "-");
}
}, {
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 opening the file manager
elBtn.addEventListener("click", () => {
openFileManager();
});
}
function openFileManager() {
Flmngr.open({
isMultiple: null, // neither true, nor false to disable picking a file and closing the dialog
});
}<link rel="stylesheet" href="https://democdn.com/frameworks/bootstrap-4.5.0/css/bootstrap.min.css">
<h2 class="mb-4">Flmngr: Rename Folders with Hooks</h2>
<p>
Folder names are normalized on the fly: all spaces are replaced with dashes before a folder is created or renamed.
<br/>
<b>Try to create a folder named <code>My Photos</code> — it will appear as <code>My-Photos</code>.</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;
}
code {
color: #333;
border: 1px solid #AAA;
padding: 2px 4px;
}