Select Single Image in Dialog

File Manager live demo with code sample 7 of 27

For example, you have a form with a file field named "Attach image." To handle this image field, you need to add a button that opens the file manager dialog, allowing the user to select one or more files and wait until a file is picked.

You might have a web administrative section where users edit website page content and want to attach images for purposes outside the main content. For example, on a product card page with fields like title, image, price, and optional custom HTML content, the image widget can be managed using the Flmngr file manager dialog.

No matter what integration you use (opening the Flmngr dialog is possible from anywhere), you need to access the Flmngr API and call its methods.

Retrieving the Flmngr API differs depending on the integration, but all use the Flmngr.open({params}) method to open the file manager.

In the onFinish callback, the files array will always have only one item because the isMultiple option is set to false.

The acceptExtensions option limits acceptable file extensions (the file manager will filter out non-image files and allow the user to pick images only), so this method will return the URL of the selected image.

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.load({
  apiKey: "FLMN24RR1234123412341234",
  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 selecting files
  elBtn.addEventListener("click", () => {
    selectFiles();
  });  
}

function selectFiles() {
  Flmngr.open({
    isMultiple: false,
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
    onFinish: (files) => {
      showSelectedImage(files);
    }
  });
}

function showSelectedImage(files) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";
  
  let 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);
}

<h2 class="mb-3">Flmngr: Select a Single Image</h2>

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

<h4 class="mt-5">Selected image</h4>
<div id="images">
  No image selected yet.
</div>

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

h2 {
  font-weight: bold;
}

#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;
    
    img {
      max-height: 350px;
      border: 1px solid #DDD;
    }
    
    p {
      margin: 5px 0 0 0;
      font-size: 14px;
      color: #444;
    }
  }
  
}

Select Single Image in Dialog

When to use

How it works

How to start using