Select Image with Preview

File Manager live demo with code sample 8 of 27

If you have a field that lets users attach an image, like in the previous sample, you may want to display a preview instead of the full original image.

As an image-first file manager, Flmngr provides options to generate previews at different resolutions while picking files. You can specify the maximum width and height for previews, as well as the file suffix that will be used to store them alongside the original image.

All of this is handled transparently. Your code will receive the preview images as needed, and these preview files will remain hidden in the file manager list, so they won’t clutter the main storage.

When calling Flmngr.open({params}), define the imageFormats parameter. This informs the file manager about all sizes and file suffixes for the formats to hide from the main view, while still allowing you to request them as part of the dialog result.

If you open the dialog from multiple places, you can define imageFormats once during the initial file manager preload using Flmngr.load({params}), as shown in this sample.

By default, two predefined formats exist: preview and medium. However, it can be useful to explicitly specify the desired resolution using the maxWidth and maxHeight fields for each format.

Finally, pass these formats via the createImageFormats parameter when opening the file manager. The onFinish callback always returns the original image URL, but any additional formats you specified will be created if needed and included in the resulting structure.

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";

// This demo uses a script for animating showing full-screen image when user clicks on a preview (a-la LightBox)
import {Luminous} from "https://cdn.skypack.dev/luminous-lightbox@2.4.0";

Flmngr.load({
  apiKey: "FLMN24RR1234123412341234",
  urlFileManager: 'https://fm.flmngr.com/fileManager',
  urlFiles: 'https://fm.flmngr.com/files',
  imageFormats: [
     {
        id: "preview",
        title: "Preview",
        suffix: "-preview",
        maxWidth: 250,
        maxHeight: 250
     }
  ]
}, {
  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({
    createImageFormats: ["preview"],
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
    isMultiple: false,
    onFinish: (files) => {
      showSelectedImageWithPreview(files);
    }
  });
}

function showSelectedImageWithPreview(files) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";
  
  // As far we requested just one file, it is the only item of the array
  let file = files[0];
  let filePreview = file.formats.find(file => file.format === "preview");
  let urlPreview = Flmngr.getNoCacheUrl(filePreview.url);
  let urlOriginal = Flmngr.getNoCacheUrl(file.url)
  
  // Add preview image
  let elTextPreview = document.createElement("p");
  elTextPreview.textContent = "Generated preview (clickable)";
  elImages.appendChild(elTextPreview);
  
  let elImgPreview = document.createElement("img");
  
  elImgPreview.src = urlPreview;
  elImgPreview.alt = "Image preview selected in Flmngr";
  elImgPreview.setAttribute("data-src-original", urlOriginal);
  elImages.appendChild(elImgPreview);
  attachLightBoxToImage(elImgPreview);
  
  // Add image original
  let elText = document.createElement("p");
  elText.textContent = "Original";
  elImages.appendChild(elText);
  
  let elImg = document.createElement("img");
  elImg.src = urlOriginal;
  elImg.alt = "Image selected in Flmngr";
  elImages.appendChild(elImg);
  
}

function attachLightBoxToImage(elImg) {
  new Luminous(
    elImg,
    {
      "showCloseButton": true,
      "sourceAttribute": "data-src-original",
    }
  );
}

<h2 class="mb-3">Flmngr: Select Image With Preview</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>

<p id="hint" style="display:none" class="hint"><b>Hint</b>: the preview is clickable.</p>

<div id="images">
  No image selected yet.
</div>

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

h2 {
  font-weight: bold;
}

#images {
    
  p {
    margin: 10px 0 0 0;
    font-size: 14px;
    font-weight: bold;
    color: #444;
  }
  
  img[data-src-original] {
    cursor: pointer;
    border: 2px solid #007FFF;
    
    &:hover {
      border-color: orange;
    }
  }
  
}

.lum-lightbox-image-wrapper {
    background: rgba(0, 0, 0, 0.7);
}

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

Select Image with Preview

When to use

How it works

How to start using