Upload files using JavaScript

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

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

<h1 class="h5 mb-3">Flmngr: upload images</h1>

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

<h2 class="h5 mt-5">Upload images</h2>
<div id="images">
  No images uploaded 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.flmngr.com/fileManager',
  urlFiles: 'https://fm.flmngr.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 uploading files
  elBtn.addEventListener("click", () => {
    uploadFiles();
  });
}

function uploadFiles() {
  Flmngr.selectFiles({ 
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: (files) => {

      Flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        onFinish: (uploadedFiles) => {
          showUploadedImages(uploadedFiles);
        }
      });

    }
  });

} 

function showUploadedImages(uploadedFiles) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";

  let elP =  document.createElement("p");
  elP.textContent = uploadedFiles.length + " images uploaded";
  elImages.appendChild(elP);

  for (let uploadedFile of uploadedFiles) {
    let el = document.createElement("div");
    el.className = "image";
    elImages.appendChild(el);   

    let elImg = document.createElement("img");
    elImg.src = uploadedFile.url;
    elImg.alt = "Image selected in Flmngr";
    el.appendChild(elImg);

    let elP = document.createElement("p");
    elP.textContent = uploadedFile.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;
}

The upload feature is an essential feature of Flmngr file manager. You can do it right from file manager dialog but sometimes you need to programmatically upload some files to the server. Flmngr API provides such a feature.

There is Flmngr.upload({params}) method that can upload passed files or links (a set of URLs) into the desired directory.

You pass there as filesOrLinks array these types of object:

Files selected by user using Flmngr.selectFiles method. File type.
Files selected by user somewhere in your app. File type.
External URLs selected by user using Flmngr.selectUrls method. string type.
External URLs specified by your app. string type.
Blob objects from your app. Blob type.

The directory where wish to place uploaded files should be set as dirUploads parameter. Note that it starts not from the root of the server, but from the root of the storage folder, see its description on the API page to know more.

The mode (rename/overwrite) is set by the mode parameter.

If you upload images, you might want to create some image formats for them after uploading (i. e. previews), you can do this with Flmngr.createImageFormats({params}) method.

This sample shows how to combine Flmngr.selectFiles and Flmngr.upload({params}) methods and let the user upload files from his computer.

NPM

React

Snippet

TinyMCE

CKEditor 4

CKEditor 5

import Flmngr from "flmngr";

Flmngr.selectFiles({
    apiKey: "FLMN24RR1234123412341234",                  // default free key
    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage 
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: (files) => {
      // Files were selected, let's upload them
      Flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        onFinish: (urls) => {
            console.log("Files uploaded. Their URLs are:");
            console.log(urls);
        }
      });
    }
});

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

export class MyButton extends React.Component {

    render() {
        return <button 
            onClick={() => {
                Flmngr.selectFiles({
                    apiKey: "FLMN24RR1234123412341234",                  // default free key
                    urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
                    urlFiles: 'https://fm.flmngr.com/files',             // demo file storage 
                    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
                    isMultiple: true,
                    onFinish: (files) => {
                      // Files were selected, let's upload them
                      Flmngr.upload({
                        filesOrLinks: files,
                        dirUploads: "/",
                        onFinish: (urls) => {
                            console.log("Files uploaded. Their URLs are:");
                            console.log(urls);
                        }
                      });
                    }
                });
            }}
        >
            Open file manager
        </button>
    }

}

<script src="https://unpkg.com/flmngr"></script>
<script>
    window.onFlmngrAPILoaded = function() {
        window.Flmngr.selectFiles({
            apiKey: "FLMN24RR1234123412341234",                  // default free key
            urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
            urlFiles: 'https://fm.flmngr.com/files',             // demo file storage 
            acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
            isMultiple: true,
            onFinish: (files) => {
              // Files were selected, let's upload them
              window.Flmngr.upload({
                filesOrLinks: files,
                dirUploads: "/",
                onFinish: (urls) => {
                    console.log("Files uploaded. Their URLs are:");
                    console.log(urls);
                }
              });
            }
        });
    }
</script>

// TinyMCE was initialized somewhere before
tinymce.activeEditor.getFlmngr(
    (Flmngr) => {
        Flmngr.selectFiles({
            // Do not specify here 'apiKey', 'urlFileManager' and 'urlFiles' again
            // (they were passed in initialization code)
            acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
            isMultiple: true,
            onFinish: (files) => {
              // Files were selected, let's upload them
              Flmngr.upload({
                filesOrLinks: files,
                dirUploads: "/",
                onFinish: (urls) => {
                    console.log("Files uploaded. Their URLs are:");
                    console.log(urls);
                }
              });
            }
        });
    }
);

// CKEditor was initialized somewhere before
CKEDITOR.instances["editor"].getFlmngr(
    (Flmngr) => {
        Flmngr.selectFiles({
            // Do not specify here 'apiKey', 'urlFileManager' and 'urlFiles' again
            // (they were passed in initialization code or in 'config.js')
            acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
            isMultiple: true,
            onFinish: (files) => {
              // Files were selected, let's upload them
              Flmngr.upload({
                filesOrLinks: files,
                dirUploads: "/",
                onFinish: (urls) => {
                    console.log("Files uploaded. Their URLs are:");
                    console.log(urls);
                }
              });
            }
        });
    }
);

ClassicEditor.create(
    document.querySelector('#editorId'), 
    {
        Flmngr: {
            apiKey: "FLMN24RR1234123412341234",                  // 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.selectFiles({
                    // There is no need to set 'apiKey', 'urlFileManager' or 'urlFiles' here
                    // due to you already set them in the config of CKEditor.
                    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
                    isMultiple: true,
                    onFinish: (files) => {
                      // Files were selected, let's upload them
                      Flmngr.upload({
                        filesOrLinks: files,
                        dirUploads: "/",
                        onFinish: (urls) => {
                            console.log("Files uploaded. Their URLs are:");
                            console.log(urls);
                        }
                      });
                    }
                });
            }
        );
    } 
).catch((error) => {});

Fast uploading files