Open file manager dialog to select files

This sample demonstrates a usage of a new Flmngr API. The sample of legacy API usage can be found here.

Play on CodePen All samples on CodePen External link

Demo

HTML

JavaScript

CSS

<h1 class="h5 mb-3">Flmngr file manager: select a single image</h1>

<div id="btn" class="btn btn-primary" style="opacity:0.2;cursor:default">Select image...</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>

<h2 class="h5 mt-5">Selected image</h2>
<div id="images">
  No image selected yet.
</div>

// In real app replace with:
// import Flmngr from "flmngr";
import Flmngr from "https://cdn.skypack.dev/flmngr";

Flmngr.load({
  apiKey: "FLMNFLMN",
  urlFileManager: 'https://fm.n1ed.com/fileManager',
  urlFiles: 'https://fm.n1ed.com/files'
}, {
  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: false,
    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);
}

body {
  padding: 20px;
  background-color: #F4F4F4;
}

#images .image {
  border: 1px solid #DDD;
  box-shadow: 5px 5px 0 0 #DDD;
  background-color: white;
  padding: 10px;
  display: inline-flex;
  flex-direction: column;
  margin: 0 25px 25px 0;
}
#images .image img {
  max-height: 350px;
  border: 1px solid #DDD;
}
#images .image p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
}

After you installed the file manager the first thing you probably want is to open its dialog to select and show some file or files and then use them in your app. This is the most popular way to use file manager.

Retrieving Flmngr API differs depending on integration, but they all will use one Flmngr.open({params}) method to open the file manager.

NPM

React

Snippet

TinyMCE

CKEditor 4

CKEditor 5

import Flmngr from "flmngr";

Flmngr.open({
    apiKey: "FLMNFLMN",                                  // default free key
    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
    isMultiple: false,                                   // let selecting a single file
    acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
    onFinish: (files) => {
        console.log("User picked:");
        console.log(files);
    }
});

import Flmngr from "@flmngr/flmngr-react";
import * as React from "react";

export class MyButton extends React.Component {

    render() {
        return <button 
            onClick={() => {

                Flmngr.open({
                    apiKey: "FLMNFLMN",                                  // default free key
                    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
                    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
                    isMultiple: false,                                   // let selecting a single file
                    acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }}
        >
            Open file manager
        </button>
    }

}

<script src="https://unpkg.com/flmngr"></script>
<script>
    window.onFlmngrAPILoaded = function() {
        window.Flmngr.open({
            apiKey: "FLMNFLMN",                                  // default free key
            urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
            urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
            isMultiple: false,                                   // let selecting a single file
            acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
</script>

// TinyMCE was initialized somewhere before
tinymce.activeEditor.getFlmngr(
    (Flmngr) => {
        Flmngr.open({
            // Do not specify here 'apiKey', 'urlFileManager' and 'urlFiles' again
            // (they were passed in initialization code)
            isMultiple: false,  // let selecting a single file
            acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
);

// CKEditor was initialized somewhere before
CKEDITOR.instances["editor"].getFlmngr(
    (Flmngr) => {
        Flmngr.open({
            // Do not specify here 'apiKey', 'urlFileManager' and 'urlFiles' again
            // (they were passed in initialization code or in 'config.js')
            isMultiple: false,  // let selecting a single file
            acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
);

ClassicEditor.create(
    document.querySelector('#editorId'), 
    {
        Flmngr: {
            apiKey: "FLMNFLMN",                                  // default free key
            urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
            urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
        }
    } 
).then( 
    (editor) => {
        editor.getFlmngr(
            (Flmngr) => {
                Flmngr.open({
                    // There is no need to set 'apiKey', 'urlFileManager' or 'urlFiles' here
                    // due to you already set them in the config of CKEditor.
                    isMultiple: false,
                    onFinish: (files) => {
                        console.log("User picked:");
                        console.log(files);
                    }
                });
            }
        );
    } 
).catch((error) => {});

This example will print the selected image into the console of your browser (press F12 to open it).

files array will guaranteed have only one item because isMultiple option is set to false.

acceptExtensions will limit acceptable extensions (the file manager will filter non-image files from the listing and allow user to pick images only), so this method will return URL of some image in onFinish callback.

You can do anything you want with this file: print it, save or add HTML image elements to your editor. Just replace console.log() with your code.