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

Demo

HTML

JavaScript

CSS

Play in CodePen External link

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

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