Upload files using JavaScript

CodePen example /at the bottom of this page/

Upload feature is an essential feature of Flmngr file manager. You can do it right from file manager dialog but sometimes you need to programmatically upload some files to the server. Flmngr API provides such feature.

There is upload() method which can upload passed files or links (a set of URLs) into desired directory.

First of all retrieve flmngr object using the way described in open file manager article. And then call its upload() method:

flmngr.upload({
    filesOrLinks: files, // some files (BLOBs) you have 
    dirUploads: "/",
    onFinish: function(urls) {
        for (var url of urls)
            console.log(url);
    }
});

In this sample we show how to upload files (BLOB objects) you already have to the server.

They will be uploaded into root storage folder, but you can change this by specifying another value for dirUploads parameter. Note that it starts not from the root of the server, but from the root of storage folder.

Probably you do not have files to upload in memory and wish to let user to select files from his computer. File manager has utitity method selectFiles() which opens standard select files dialog of a browser, you can pass its result into upload() function like this:

flmngr.selectFiles({ 
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: function(files) {

      flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        onFinish: function(urls) {
            for (var url of urls)
                console.log(url);
        }
      });

    }
});

CodePen example

Demo
HTML
JavaScript
CSS
<div style="display:none">
  <div id="editor"></div>
</div>

<h1 class="h5 mb-3">Flmngr file manager: Upload images</h1>

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

<h2 class="h5 mt-5">Upload images</h2>
<div id="images">
  No images uploaded yet.
</div>
window.onFlmngrLoaded = 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 uploading files
  elBtn.addEventListener("click", function() {
    uploadFiles();
  });
}

function uploadFiles() {
  let flmngr = window.flmngr.create({
    urlFileManager: 'https://fm.n1ed.com/fileManager',
    urlFiles: 'https://fm.n1ed.com/files'
  });
  flmngr.selectFiles({ 
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: function(files) {

      flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        onFinish: function(urls) {
          showUploadedImages(urls);
        }
      });

    }
  });

} 

function showUploadedImages(urls) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";

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

  for (let url of urls) {

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

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

    let elP = document.createElement("p");
    elP.textContent = 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: 350px;
  border: 1px solid #DDD;
}
#images .image p {
  margin: 5px 0 0 0;
  font-size: 14px;
  color: #444;
}