JS Component: Manage Image Gallery

File Manager live demo with code sample 5 of 27

A common task—selecting a set of images in a form (for example, when editing a website page)—can be handled by opening the file manager dialog on a button click.

If you prefer not to use modal dialogs in your UI, you can instead mount the file manager panel component directly onto the page.

Use the Flmngr.mount(el, {params}) method to attach the file manager to an HTML element on your page.

As shown in the preview sample, you can request resized versions (previews) of the selected images in addition to the original files.

Wait for the onFinish callback, then process the received list of files along with any generated formats if specified. Afterward, you can either unmount the component or keep it rendered to allow modifying the selected file set.

If you use React, see the React sample for the same approach.

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: true,
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
  
    // Optional part for auto creation of previews for each selected image
    createImageFormats: ["preview"],
    imageFormats: [
      {
        id: "preview",
        title: "Preview",
        suffix: "-preview",
        maxWidth: 250,
        maxHeight: 250
      }
    ],

    onFinish: (
      files: {
        url: string,
        formats: {
          format: string,
          url: string
        }[]
      }[]
    ) => {
      
      let elFileManager = document.getElementById("file-manager");
      elFileManager.parentElement.removeChild(elFileManager);
      renderImages(
        files.map(file => {
          return {
            url: file.url,
            urlPreview: file.formats.find(formatItem => formatItem.format === "preview").url
          };
        })
      );
    }

  }
);

function renderImages(images: {
  url: string, 
  urlPreview: string
}[]) {
  let elImages = document.getElementById("images");
  
  for (let image of images) {
    let elImage = document.createElement("div");
    elImage.className = "image";
    elImage.id = image.url;
    elImages.appendChild(elImage);
    
    let elImg = document.createElement("img");
    elImg.src = image.urlPreview;
    elImg.alt = "Image selected with component of Flmngr file manager";
    elImg.addEventListener("click", () => { window.open(image.url, "_blank"); });
    elImage.appendChild(elImg);
    
    let elP = document.createElement("p");
    elP.textContent = image.url;
    elImage.appendChild(elP);
  }
  
  document.getElementById("hint").textContent = "Images here are rendered as especially generated previews, click on an image to open it's original.";
}

<h2>Flmngr: File Manager Component for Selecting a Set of Images</h2>

<div style="width:1100px;height:600px">
      
  <p id="hint">Preview images are automatically generated each time you select images by pressing "OK" below.</p>
  
  <div id="file-manager"></div>
  
  <div id="images"></div>
  
</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: 250px;
      cursor: pointer;
      border: 2px solid #007FFF;

      &:hover {
        border-color: orange;
      }
    }
    
    p {
      margin: 5px 0 0 0;
      font-size: 14px;
      color: #444;
    }
  }
  
}

JS Component: Manage Image Gallery

When to use

How it works

How to start using