Select Multiple Files

File Manager live demo with code sample 10 of 27

When you need to manage a collection of files—not necessarily images—you can use the Flmngr file manager to select a new file set or manage an existing list. For example, you might attach it to a file input field in a form.

You can either disable file extension restrictions entirely or define your own allowed types (ZIP, PDF, Word documents, etc.), as demonstrated in this example.

Use the Flmngr file manager options: acceptExtensions to restrict allowed file types, isMultiple to enable selecting multiple files, and list to provide preselected file URLs.

This example is very similar to managing an image gallery, but it supports different file extensions and does not require specifying image preview formats. Handle the user’s selection as usual in the onFinish callback.

Use this code in a custom application when you install the React file manager component or the JavaScript file manager package from NPM.

If your app doesn't use NPM at all, you can quickly install the file manager JS snippet instead.

These packages provide a powerful Flmngr API, which this and other code samples demonstrate.

import {Flmngr} from "flmngr";

Flmngr.load({
  apiKey: "FLMN24RR1234123412341234",
  urlFileManager: 'https://fm.flmngr.com/fileManager',
  urlFiles: 'https://fm.flmngr.com/files'
}, {
  onFlmngrLoaded: () => {
    attachOnClickListenerToButton();
  }
});

function attachOnClickListenerToButton() {
  let elBtn = document.getElementById("btn");
  
  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
  let elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);
  
  // Add a listener for selecting files
  elBtn.addEventListener("click", () => {
    selectFiles();
  });
}

function selectFiles() {
  
  // Collect URLs of already selected files
  let elsExistingFiles = document.querySelectorAll("a.file");
  let urls = [];
  for (let i=0; i<elsExistingFiles.length; i++)
    urls.push(elsExistingFiles.item(i).href);
  
  Flmngr.open({
    isMultiple: true,
    list: urls,
    acceptExtensions: ["zip", "psd", "html", "doc", "xml", "pdf", "js", "txt"],
    dir: "/Docs",
    onFinish: (files) => {
      showSelectedFiles(files);
    }
  });
}

function showSelectedFiles(files) {
  let elFiles = document.getElementById("files");
  elFiles.innerHTML = "";
  
  for (let file of files) {
    let elA = document.createElement("a");
    elA.className = "file";
    elA.href = file.url;
    elA.textContent = file.url;
    elFiles.appendChild(elA);
  }

}

<h2 class="mb-3">Flmngr: Select Multiple Non-Image Files</h2>

<div id="btn" class="btn btn-primary btn-lg" style="opacity:0.2;cursor:default">Select files</div>
<div id="loading" style="font-size:12px">Loading file manager...</div>
<p class="hint"><b>Hint</b>: after you have selected files,<br/> you can re-manage the list.</p>

<h4 class="mt-5">Selected files</h4>
<div id="files">
  No files selected yet.
</div>

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

h2 {
  font-weight: bold;
}

a.file {
  display: block;
  margin: 5px 0;
}

.hint {
  color: #007FFF; 
  font-size:14px; 
  margin-top: 10px; 
  line-height: 16px;
}

Select Multiple Files

When to use

How it works

How to start using