Select multiple non-image files with file manager

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

Read the explanation of this demo below

Demo

HTML

JavaScript

CSS

<div style="display:none">
  <div id="editor"></div>
</div>

<h1 class="h5 mb-3">Flmngr file manager: select multiple non-image files</h1>

<div id="btn" class="btn btn-primary" style="opacity:0.2;cursor:default">Select files...</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>
<p class="hint"><b>Hint</b>: after you selected files,<br/> you can re-manage the list.</p>

<h2 class="h5 mt-5">Selected files</h2>
<div id="files">
  No files 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() {

  // Collect URLs of already selected files
  let elsExistingFiles = document.querySelectorAll("a.file");
  let urls = [];
  for (let i=0; i<elsExistingFiles.length; i++)
    urls.push(elsExistingFiles.item(i).href);

  Flmngr.open({
    isMultiple: true,
    list: urls,
    acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
    dir: "/Docs",
    onFinish: (files) => {
      showSelectedFiles(files);
    }
  });
}

function showSelectedFiles(files) {
  let elFiles = document.getElementById("files");
  elFiles.innerHTML = "";

  for (let file of files) {
    let elA = document.createElement("a");
    elA.className = "file";
    elA.href = file.url;
    elA.textContent = file.url;
    elFiles.appendChild(elA);
  }

}

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

a.file {
  display: block;
  margin: 10px 0;
}

.hint {
  color: #007FFF;
  font-size: 14px;
  margin-top: 10px;
  line-height: 16px;
}

Premium feature

When you need to manage a set of files, you can call Flmngr file manager to pick a new file set or manage an existing list. I. e. you use the file manager to attach to some file field in your form.

You can limit file extensions with specific ones, for example, you might want the file manager to allow picking only files like Word document, ZIP archive, PDF, or other types of file.

Flmngr file manager has an acceptExtensions option to limit file extensions, isMultiple to allow multiple files choice, and list to pass preselected URLs of files.

This sample is very similar to managing an image gallery but there are other accepted file extensions and you do not need to specify a format for image previews to generate. Handle user's choice in onFinish callback.

NPM

React

Snippet

TinyMCE

CKEditor 4

CKEditor 5

import Flmngr from "flmngr";

// Get all files that currently exist in a list
let urls = getFiles(); // your code

Flmngr.open({
    apiKey: "FLMNFLMN",                                  // default free key
    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
    acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
    list: urls,                                          // preselected files
    isMultiple: false,                                   // let selecting a single file
    onFinish: (files) => {
        setFiles(files); // your code
    }
});

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
                    acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
                    list: this.state.urls,                                    // preselected files
                    isMultiple: false,                                   // let selecting a single file
                    onFinish: (files) => {
                        this.setState({
                            urls: files.map(f => f.url)
                        });
                    }
                });

            }}
        >
            Open file manager
        </button>
    }

}

<script src="https://unpkg.com/flmngr"></script>
<script>
    window.onFlmngrAPILoaded = function() {
        // Get all files that currently exist in a list
        let urls = getFiles(); // your code

        Flmngr.open({
            apiKey: "FLMNFLMN",                                  // default free key
            urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
            urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
            acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
            list: urls,                                          // preselected files
            isMultiple: false,                                   // let selecting a single file
            onFinish: (files) => {
                setFiles(files); // your code
            }
        });
    }
</script>

// TinyMCE was initialized somewhere before
tinymce.activeEditor.getFlmngr(
    (Flmngr) => {
        // Get all files that currently exist in a list
        let urls = getFiles(); // your code

        Flmngr.open({
            // Do not specify here 'apiKey', 'urlFileManager', 'urlFiles'
            // and 'imageFormats' again (they were passed in TinyMCE initialization code)
            acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
            list: urls,                                          // preselected files
            isMultiple: false,                                   // let selecting a single file
            onFinish: (files) => {
                setFiles(files); // your code
            }
        });
    }
);

// CKEditor was initialized somewhere before
CKEDITOR.instances["editor"].getFlmngr(
    (Flmngr) => {
        // Get all files that currently exist in a list
        let urls = getFiles(); // your code

        Flmngr.open({
            // Do not specify here 'apiKey', 'urlFileManager', and 'urlFiles'
            // (they were passed in CKEditor initialization code or in 'config.js')
            acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
            list: urls,                                          // preselected files
            isMultiple: false,                                   // let selecting a single file
            onFinish: (files) => {
                setFiles(files); // your code
            }
        });
    }
);

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) => {
                // Get all files that currently exist in a list
                let urls = getFiles(); // your code

                Flmngr.open({
                    // There is no need to set 'apiKey', 'urlFileManager', 'urlFiles' or
                    // 'imagePreviews' here due to you already set them in the config of CKEditor.
                    acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
                    list: urls,                                          // preselected files
                    isMultiple: false,                                   // let selecting a single file
                    onFinish: (files) => {
                        setFiles(files); // your code
                    }
                });
            }
        );
    } 
).catch((error) => {});

Select multiple files