Code samples
Live demos of how to implement, tune and use Flmngr file manager in different environment for various tasks. Each code sample is provided with editable CodePen page, that lets you experimenting with the demo editing its code.
React Component
React File Browser
Render a React file manager panel for browsing and managing files on your server.
React: Select Single Image
Use the React file manager component to select a single image from your storage.
React: Manage Image Gallery
Manage and reorder multiple images using the React file manager component.
JavaScript / TypeScript
JS Component: Select Single Image
Attach the file manager panel to the DOM and allow the user to select a single image.
JS Component: Manage Image Gallery
File manager panel that lets users manage a set of images without opening a dialog.
JS Component: File Browser
Attach a JavaScript file browser to any HTML element for server-side file management.
Select Single Image in Dialog
Open a dialog allowing the user to select a single image and display it in your UI.
Select Image with Preview
Open a file manager dialog to select an image and automatically generate a preview.
Manage Image Gallery
Select multiple images, rearrange their order, and edit an existing gallery when reopening it.
Select Multiple Files
Pick multiple non-image files using a flexible file manager dialog.
Browse Folder
Open a full-screen file browser for full storage management without selecting files.
Upload Files
Select local files and upload them to the server without opening the file manager.
Rename Files on Upload
Preprocess files during upload with a custom hook and rename them according to defined rules.
Open Image Editor
Directly open the file manager's image editor and save changes to the server if needed.
Edit Image and Save as Base64
Edit an image and save it as Base64 in the UI without uploading to the server.
Event Listeners
Listen to all file and folder events (create, upload, rename, delete) and run custom logic.
N1ED with File Manager
N1ED Editor with File Manager
TinyMCE-based N1ED editor with pre-integrated Flmngr file manager.
N1ED: File Manager from Field
Call the file manager externally from TinyMCE with N1ED plugin support.
TinyMCE File Manager
TinyMCE File Manager
Standard TinyMCE file manager plugin integration for your editor.
TinyMCE File Manager from Field
Open the file manager dialog externally while using the same storage configuration.
TinyMCE File Manager: Manual Toolbar
Customize TinyMCE toolbar by adding file manager buttons in your preferred order.
CKEditor 5 File Manager
CKEditor 5 File Manager
CKEditor 5 build with file manager plugin installed for full media management.
CKEditor 5 File Manager from Field
Access the CKEditor 5 file manager externally using the same configuration.
CKEditor 4 File Manager
CKEditor 4 File Manager
Install CKEditor 4 file manager plugin in this classic WYSIWYG editor.
CKEditor 4 File Manager from Field
Access file manager API and call dialog externally with CKEditor 4 plugin installed.
CKEditor 4 File Manager: Manual Toolbar
Manually configure CKEditor 4 toolbar and add file manager buttons.