npmWeb Frontendupdated 08 Aug 2026

flmngr

Item: flmngr
Rating: 3.3
Author: Keyoor

Flmngr is a browser-side file manager and image picker SDK. It opens a hosted-looking dialog over files in your own local, Amazon S3, or Azure Blob storage, and can upload, select, rename, organize, edit, and resize images. The npm package supplies TypeScript declarations and a small loader, while the actual file manager and ImgPen editor are downloaded at runtime from Flmngr's CDN. You must also connect it to a Flmngr backend endpoint or one of its cloud-storage adapters.

flmngr · v2.0.19 · 5.0M/wk · docs · reviewed by Keyoor

Verdict

Flmngr can save substantial UI work when the product truly needs a browsable asset library and image editor. Do not install it as a casual uploader: the runtime CDN, vendor key, separate backend, premium gates, and LGPL terms all need approval first.

API stability3/5The current class has a compact set of methods and the site still documents a legacy API, which shows some migration care. However, version 2.0.19 loads `/v/latest/` browser scripts at runtime, so the behavior users execute is not pinned to the npm version or lockfile. Global first-call configuration and string-thrown errors also make integration boundaries less predictable than a normal bundled SDK.

Docs4/5The official site has individual pages for every public method, parameter tables, backend installation paths, live samples, and unusually useful warnings about CORS, browser file-filter limitations, CSRF, and paid features. The weak point is drift: the shipped declaration for image-format results differs from the richer object shape shown on the API page, and the package metadata provides no repository link for resolving that discrepancy.

Maintenance3/5npm shows 2.0.19 published on 2025-08-03, with TypeScript declarations and a small dependency surface. There is no source repository in the package metadata, so readers cannot inspect commit cadence, issues, pull requests, release notes, or security handling through the normal open-source workflow. Most executable functionality is updated independently behind the vendor's `v/latest` CDN URL.

Ecosystem3/5The official documentation covers direct JavaScript plus React, Vue, CKEditor, TinyMCE, Froala, Drupal, PHP, Express, Nest, S3, and Azure paths, and npm recorded 4,964,832 downloads for 2026-07-31 through 2026-08-06. That breadth is useful, but the ecosystem is vendor-centered: the client protocol, backend adapters, API key, cloud scripts, and premium plan all come from the same supplier.

Use it if

You need a ready-made visual file manager, not just a drag-and-drop upload field, and accept a vendor API key plus runtime CDN code
Your users must browse and reuse files already held in local server storage, Amazon S3, or Azure Blob instead of uploading every time
You want one UI for file picking, folder management, image editing, and server-generated image variants
You can deploy the documented PHP or Node backend, or use the vendor's S3 or Azure adapter

Skip it if

Your security policy forbids runtime code from a third-party CDN: the 2.0.19 loader injects cloud.flmngr.com/v/latest/sdk/flmngr.js and imgpen.js rather than bundling the working UI
You need a fully open-source, inspectable client: npm lists LGPL-3.0-or-later, but the package tarball is chiefly a loader and the registry does not link a source repository
You need multi-file picking, custom upload directories, overwrite mode, external URL selection, or image editing on the free tier; the official API pages mark those capabilities as premium
You are rendering on the server or need a non-browser client: the distributed code reads self, window, document, File, and HTMLElement, so it must stay behind a client-only boundary
You only need uploads: Uppy, FilePond, or react-dropzone avoid the API key, separate file-manager backend, storage URL mapping, and much larger vendor integration surface

Setup reality

Installing `flmngr` adds one runtime dependency and bundled TypeScript declarations, but it does not give you a standalone file manager. The first browser call must include an API key, and the loader then injects the current `flmngr.js` and `imgpen.js` from `cloud.flmngr.com/v/latest`; that network request and vendor domain must be allowed by your Content Security Policy. The code stores the first key globally and throws if a later call uses another one. Real storage needs both `urlFileManager`, the HTTP endpoint serving the Flmngr protocol, and `urlFiles`, the public URL prefix that maps to the same directory. You must install and secure a documented PHP or Node backend, or configure the S3/Azure service. Multi-tenant apps have to keep each user's server directory and public URL prefix aligned. Add authentication and CSRF headers through the callback instead of exposing server credentials in client code. Imports are browser-only, so Next.js, Nuxt, and other SSR builds need a client component or dynamic import. Preload with `Flmngr.load()` at page start or the first dialog waits for two remote scripts. Cross-origin image editing also requires CORS on the image host; the official guide warns that a missing header produces a blank editor. Finally, check the paid plan before building around multi-select, URL import, custom upload folders, overwrite behavior, or ImgPen, because the API reference labels them premium.

Patterns

Preload and configure the browser SDKpreload-sdk

import { Flmngr } from 'flmngr';

Flmngr.load(
  {
    apiKey: 'YOUR_API_KEY',
    urlFileManager: '/api/flmngr',
    urlFiles: 'https://cdn.example.com/uploads/',
  },
  { onFlmngrLoaded: () => console.log('Flmngr ready') },
);

Call this only in the browser. It injects remote scripts from cloud.flmngr.com; allow that host in script-src and do not switch API keys later on the same page.

Open a single-file pickerpick-single-file

Flmngr.open({
  acceptExtensions: ['pdf'],
  onFinish: (files) => {
    const selected = files[0];
    console.log(selected.url);
  },
});

After a prior load call, common connection settings are reused. An onFinish callback is mandatory whenever isMultiple is not null.

Pick multiple imagespick-multiple-images

Flmngr.open({
  isMultiple: true,
  acceptExtensions: ['png', 'jpg', 'jpeg', 'webp'],
  onFinish: (files) => {
    const urls = files.map((file) => file.url);
    renderGallery(urls);
  },
});

Multi-file selection is marked as a premium feature in the official API reference. Extensions here do not include leading dots.

Reopen a picker with files preselectededit-existing-selection

Flmngr.open({
  isMultiple: true,
  list: currentImageUrls,
  allowReorder: true,
  onFinish: (files) => {
    currentImageUrls = files.map((file) => file.url);
  },
});

Every URL in list must begin with the configured urlFiles prefix and point into the managed storage. Reordering and multiple selection may require a paid plan.

Mount the file manager into a pagemount-manager-panel

const host = document.querySelector('#asset-manager');
if (!(host instanceof HTMLElement)) throw new Error('Missing host');

Flmngr.mount(host, {
  isMultiple: null,
});

mount is browser-only and requires a real HTMLElement. With isMultiple null the panel manages files but does not return a picked file.

Open the native file chooserselect-local-files

Flmngr.selectFiles({
  isMultiple: true,
  acceptExtensions: ['.doc', '.docx'],
  onFinish: (files) => {
    console.log(files);
  },
});

This only returns browser File objects; it does not upload them. The docs warn that some older browsers may ignore the accept filter, so validate file type again.

Upload selected files without opening the managerupload-files

import { FlmngrUploadMode } from 'flmngr';

Flmngr.upload({
  filesOrLinks: files,
  dirUploads: 'invoices/2026',
  mode: FlmngrUploadMode.AUTORENAME,
  onFinish: (uploaded) => console.log(uploaded.map((file) => file.url)),
  onFail: (message) => console.error(message),
});

Custom upload directories and upload modes are marked premium. AUTORENAME avoids silently replacing an existing same-name file.

Add a fresh CSRF header to backend requestsattach-csrf-token

Flmngr.load({
  apiKey: 'YOUR_API_KEY',
  urlFileManager: '/api/flmngr',
  urlFiles: 'https://cdn.example.com/uploads/',
  urlFileManager__CSRF: async (onSuccess, onError) => {
    try {
      const token = await getCsrfToken();
      onSuccess({ headers: { 'X-CSRF-Token': token } });
    } catch {
      onError();
    }
  },
});

Flmngr calls this hook before each backend request. Call onError when token acquisition fails so it does not send an unauthenticated request.

Edit an image and upload the resultedit-and-upload-image

Flmngr.editAndUpload({
  url: 'https://images.example.com/source/photo.jpg',
  dirUploads: 'edited',
  filename: 'photo-edited',
  onSave: (newUrl) => updatePreview(newUrl),
  onCancel: () => console.log('Edit cancelled'),
});

ImgPen and custom upload directories are premium. Cross-origin source images need a suitable CORS header or the editor can display a blank image.

Generate configured image variantscreate-image-variants

Flmngr.createImageFormats({
  urls: ['https://cdn.example.com/uploads/photo.jpg'],
  createImageFormats: {
    thumbnail: 'DO_NOT_UPDATE',
    social: 'ALWAYS',
  },
  showProgress: true,
  onFinish: (result) => console.log(result),
  onProgress: (finished, failed, total) => {
    console.log({ finished, failed, total });
  },
});

The thumbnail and social IDs must already be defined in imageFormats during load. DO_NOT_UPDATE reuses an existing variant; ALWAYS regenerates it.

Alternatives

Package	Registry	Pick it when
@uppy/core	npm	Choose it for composable uploads, resumability, and storage plugins when users do not need to browse an existing server-side file library
filepond	npm	Choose it for a polished framework-neutral upload field with image preview and processing plugins
react-dropzone	npm	Choose it in React when you want accessible file selection and will own the upload API and visual design
filestack-js	npm	Choose it when a commercial hosted picker and managed ingestion pipeline are preferable to running a file-manager backend