Select image with a preview with file manager

CodePen example /at the bottom of this page/

You can ask user not only to select some image from the storage (and probably upload it), but also require a preview for it.

After passing required parameters into file manager, it will automatically generate previews for selected files using maximum width and/or height you specified.

Define image formats you need

First of all when you intialize your Flmngr instance object you need once and for all further usages define image formats you use in the whole your app. You can have many such image formats: previews, medium size images, etc.. All these files being just automatically generated duplicates of original images will be hidden in the file manager dialog. File manager will control them fully transparently for you.

let flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files',
    imageFormats: [
        {
            id: "preview",
            title: "Preview",
            suffix: "-preview",
            maxWidth: 250,
            maxHeight: 250
        }
    ]
});

id you set here you will use as a reference in all further calls. suffix parameter will be added to the end of file names of all automatically created previews of images.

You can also define your own image formats and add them into imageFormats array.

Call file manager

Now when flmngr instance object is created, you can use its API method pickFiles() filling a special parameter imageFormats (string array with IDs of image formats you defined before).

flmngr.pickFiles({
    imageFormats: ["preview"],
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
    isMultiple: false,
    onFinish: function(files) {

        // Selected image
        var file = files[0];
        console.log("Original image: " + file.url);

        // Automatically generated preview
        var filePreview = file.formats.find(function(f) { return f.format === "preview"; });
        console.log("Preview image: " + filePreview.url);
    }
});

Here when you go into onFinish() callback you receive array of files in this format:

[
    {
        url: "http://example.com/files/image.png",
        formats: [
            {
                format: "preview"
                url: "http://example.com/files/image-preview.png",
            }
        ]
    }
]

In formats array there will be all image formats you defined on initialization and required in pickFiles call.

CodePen example

Demo
HTML
JavaScript
CSS
<div style="display:none">
  <div id="editor"></div>
</div>

<h1 class="h5 mb-3">Flmngr file manager: select image with preview</h1>

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

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

<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/imgpen.js"></script>
window.onFlmngrAndImgPenLoaded = function() {

  var elBtn = document.getElementById("btn");

  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
  var elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);

  // Add a listener for selecting files
  elBtn.addEventListener("click", function() {
    selectFiles();
  });
}

function selectFiles() {
  let flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files',
    imageFormats: [
      {
        id: "preview",
        title: "Preview",
        suffix: "-preview",
        maxWidth: 250,
        maxHeight: 250
      }
    ]
  });
  flmngr.pickFiles({
    imageFormats: ["preview"],
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
    isMultiple: false,
    onFinish: function(files) {
      showSelectedImageWithPreview(files);
    }
  });
}

function showSelectedImageWithPreview(files) {
  var elImages = document.getElementById("images");
  elImages.innerHTML = "";

  // As far we requested just one file, it is the only item of the array
  var file = files[0];

  // Add preview image
  var elTextPreview = document.createElement("p");
  elTextPreview.textContent = "Preview image";
  elImages.appendChild(elTextPreview);

  var elImgPreview = document.createElement("img");
  elImgPreview.src = file.formats.find(function(file) { return file.format === "preview";}).url;
  elImgPreview.alt = "Image preview selected in Flmngr";
  elImages.appendChild(elImgPreview);

  // Add image original
  var elText = document.createElement("p");
  elText.textContent = "Original image";
  elImages.appendChild(elText);

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

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

#images p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
}