JS Component: Select Single Image

File Manager live demo with code sample 4 of 27

As in the selecting a file sample, this example illustrates opening the file manager to select an image, but uses a component (a panel) instead of opening a dialog.

This is useful when you want to avoid any modal widgets and just allow the user to pick an image from a folder.

The Flmngr.mount(el, {params}) method of the Flmngr API is used to mount the component to an HTML element in the DOM tree.

Pass the same parameters as when calling the dialog with the Flmngr.open({params}) method, although some parameters related to the dialog's appearance will be ignored.

In any case, it will call the onFinish callback when the user presses the "Pick" button. You can then decide whether to unmount the component or keep it (as shown here) to allow the user to change their choice by selecting another file.

If you use React, there is a React open file manager sample demonstrating the same functionality.

Use this code in a custom application when you install the React file manager component or the JavaScript file manager package from NPM.

If your app doesn't use NPM at all, you can quickly install the file manager JS snippet instead.

These packages provide a powerful Flmngr API, which this and other code samples demonstrate.

import {Flmngr} from "flmngr";

Flmngr.mount(
  document.getElementById("file-manager"),
  {
    apiKey: "FLMN24RR1234123412341234",
    urlFileManager: "https://fm.flmngr.com/fileManager",
    urlFiles: "https://fm.flmngr.com/files",
    isMultiple: false, /* Crucial to allow picking a file*/
    onFinish: (
      files: {
        url: string,
        formats: {
          format: string,
          url: string
        }[]
      }[]
    ) => {
      
      let elP = document.getElementById("files");
      if (files.length > 0) {
        elP.innerHTML = "Selected URL: <code>" + files[0].url + "</code>";
      } else {
        elP.innerHTML = "No files selected";
      }
      
    }
  }
);

<h2>Flmngr: File Manager Component for Selecting a Single File</h2>

<div style="width:100%;height:100%">
  <p id="files">
     No files selected
  </p>
  <div style="width:1100px,height:600px" id="file-manager"/>
</div>

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

h2 {
  font-weight: bold;
}

#files {
  display: flex;
  align-items: center;
}

code {
  color: black;
  background-color: white;
  border: 1px solid #AAA;
  padding: 3px 6px;
  margin-left: 8px;
}

JS Component: Select Single Image

When to use

How it works

How to start using