
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
<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>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/flmngr.js"></script>
<script src="https://cloud.flmngr.com/cdn/FLMNFLMN/imgpen.js"></script>
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;
}