Open file manager dialog to select files

CodePen example /at the bottom of this page/

After you installed the file manager the first thing you probably want is to open its dialog to select and show some files.

There is a couple of steps you need to do:

Get Flmngr instance object

Just once in your app you need to initialize Flmngr and then use this preconfigured object always.

This depends of integration you use:

JavaScript snippet

CKEditor 4

TinyMCE 5

Froala

// Just once: wait for Flmngr is loaded (only if you run on the page start)...  
window.onFlmngrAndImgpenLoaded = function() {
    // ...and also just once: create a preconfigured instance of Flmngr
    var flmngr = window.flmngr.create({
        urlFileManager: 'https://fm.flmngr.com/fileManager',
        urlFiles: 'https://fm.flmngr.com/files'
    });
    // TODO: then use and reuse this 'flmngr' instance object
});

// Get Flmngr instance object already preconfigured by your CKEditor config
// ID of your editor (you can have multiple CKEditor editors on the page) 
// is probably "id" attribute of its HTML element. 
var flmngr = window.CKEDITOR.instances["your_editor_id"].getFlmngr();
// TODO: then use and reuse 'flmngr' instance object

// Get Flmngr instance object already preconfigured by your TinyMCE config
// ID of your editor (you can have multiple TinyMCE editors on the page)
// is probably "id" attribute of its HTML element. 
var flmngr = window.tinymce.editors["your_editor_id"].getFlmngr();
// TODO: then use and reuse 'flmngr' instance object

froalaEditor.Flmngr.getFlmngrInstance(function(flmngr) {
    // TODO: then use and reuse 'flmngr' instance object
});

In other integrations than JS snippet the callback onFlmngrAndImgpenLoaded is also available if you need, but if you execute your code in the context of already loaded editor, the file manager was probably also loaded.

Do not try to wait onFlmngrAndImgpenLoaded listener if your code is executed not on the page load: if you already missed this callback it will not fire the second time. For such cases you can just check window.flmngr (for file manager) and/or window.imgpen (for image editor) variables: if they are set the component is already loaded.

Above flmngr is instance object you retrieved in the previous step. You can reuse it as many times as you need.

Show select files dialog

The most popular way to use file manager is to call its dialog to select file or files to use them in your app.

Here is this sample we show how to ask user to select a single image from the server. flmngr is the instance object you retrieved in the previous step.

flmngr.pickFiles({
    isMultiple: false,
    acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
    onFinish: function(files) {
        console.log(files[0].url);
    }
});

This example will print 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.

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

Options

In the sample above we use isMultiple option with value true to make allow users pick multiple images and acceptExtensions to limit extensions of selectable files.

There is a list of options of pickFiles() method you can use and the most useful of them are:

list - array of URLs of files which are preselected on Flmngr windows shows. Useful when user has already specified some images before and you need to change it (i. e. user changes its profile photo or edits image gallery).
acceptExtensions - only files with these extensions will be shown in the file dialog. If you do not specify anything, all files will be visible and available for picking.
imageFormats - used when you need to get both images and their automatically generated previews in another resolution. Pass here IDs of image formats you passed when initialized Flmngr.
onCancel - this callback function will be executed if user cancels file manager dialog.
onFinish - standard callback for when user successfully picked some files and pressed "OK". It has the argument files - array of type FlmngrFileWithFormats. If you do not use imageFormats its the only field you need in each its item is url.

Tip: pickFiles is just one of different API methods available for using.

CodePen example

Demo

HTML

JavaScript

CSS

Play in CodePen External link

<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>

window.onFlmngrAndImgPenLoaded = function() {

  var elBtn = document.getElementById("btn");

  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
  var elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);

  // Add a listener for selecting files
  elBtn.addEventListener("click", function() {
    selectFiles();
  });
}

function selectFiles() {
  let flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files'
  });
  flmngr.pickFiles({
    isMultiple: false,
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
    onFinish: function(files) {
      showSelectedImage(files);
    }
  });
}

function showSelectedImage(files) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";

  var 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;
}