Manage image gallery with file manager

CodePen example /at the bottom of this page/

One of popular task is selecting multiple images and modifying such images set time to time. This means you need to open the file manager dialog with preselected images which are a part of existing gallery.

Flmngr file manager allows you to do this by using the same way to open file manager dialog (pickFiles method), but with options isMultiple and list (a set of preselected URLs).

var urls = getGalleryImages(); // your code
flmngr.pickFiles({
    list: urls,
    isMultiple: true,
    acceptExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
    onFinish: function(files) {
        var urls = files.map(function(file) { return file.url; }); 
        setGalleryImages(urls); // your code
    }
  });

CodePen example

Demo

HTML

JavaScript

CSS

Play in CodePen External link

<h1 class="h5 mb-3">Flmngr file manager: manage image gallery</h1>

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

<h2 class="h5 mt-5">Image gallery</h2>
<div id="images">
  <p>2 images selected</p>
  <div class="image">
    <img src="https://fm.n1ed.com/files/book.png" alt="Image selected in Flmngr">
    <p>https://fm.n1ed.com/files/book.png</p>   
  </div>
  <div class="image">
    <img src="https://fm.n1ed.com/files/christmas-ball.png" alt="Image selected in Flmngr">
    <p>https://fm.n1ed.com/files/christmas-ball.png</p>
  </div>
</div>

var flmngr;

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

  flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files'
  });

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

function selectFiles() {

  // Collect URLs of images of existing gallery set
  var elsExistingImages = document.querySelectorAll(".image > img");
  var urls = [];
  for (var i=0; i<elsExistingImages.length; i++)
    urls.push(elsExistingImages.item(i).src);

  flmngr.pickFiles({
    list: urls,
    isMultiple: true,
    acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
    onFinish: function(files) {
      showSelectedImages(files);
    }
  });
}

function showSelectedImages(files) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";

  let elP =  document.createElement("p");
  elP.textContent = files.length + " images selected";
  elImages.appendChild(elP);

  for (let file of files) {

    let el = document.createElement("div");
    el.className = "image";
    elImages.appendChild(el);   

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

    let elP = document.createElement("p");
    elP.textContent = file.url;
    el.appendChild(elP);

  }        
}

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

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