
Open file manager dialog to select files
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
});
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 argumentfiles
- array of typeFlmngrFileWithFormats
. If you do not useimageFormats
its the only field you need in each its item isurl
.
Tip: pickFiles
is just one of different API methods available for using.
CodePen example
<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>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/imgpen.js"></script>
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;
}