
Select multiple non-image files with file manager
CodePen example /at the bottom of this page/
Sometimes you need to select not images, but some regular file - Word document, ZIP archive, PDF or other type of file.
Flmngr file manager has an acceptExtensions
option to limit file extensions.
And of course after files were selected you can process them as you wish. In samples with a pictures we added selected files as images, but here in the final sample we show you how to insert them as links.
As usually initialize file manager getting flmngr
instance object and call pickFiles()
method:
flmngr.pickFiles({
isMultiple: true,
acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
onFinish: function(files) {
for (var file of files)
console.log(file.url);
}
});
CodePen example
<div style="display:none">
<div id="editor"></div>
</div>
<h1 class="h5 mb-3">Flmngr file manager: select multiple non-image files</h1>
<p>Note: such files can be found in "Docs" folder</p>
<div id="btn" class="btn btn-primary" style="opacity:0.2;cursor:default">Select files...</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>
<h2 class="h5 mt-5">Selected files</h2>
<div id="files">
No files 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'
});
flmngr.pickFiles({
isMultiple: true,
acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
onFinish: function(files) {
showSelectedFiles(files);
}
});
}
function showSelectedFiles(files) {
let elFiles = document.getElementById("files");
elFiles.innerHTML = "";
for (var file of files) {
let elA = document.createElement("a");
elA.href = file.url;
elA.textContent = file.url;
elFiles.appendChild(elA);
}
}
body {
padding: 20px;
background-color: #F4F4F4;
}
a {
display: block;
margin: 10px 0;
}