Upload Files

File Manager live demo with code sample 12 of 27

You may have storage available, but sometimes you just need to upload files or images without displaying the file manager. These uploaded files can be used by your users later, but for now you only need a tool for instant file uploads.

The standard solution is to attach this functionality to a button and open a file browser dialog to select and upload the files. The Flmngr file manager provides a tool for this.

Additionally, after uploading, you can pass the resulting URLs to the file manager dialog in file set management mode, where the uploaded files will be preselected for reordering or further selection changes.

The File Manager API provides two key methods: Flmngr.selectFiles({params}) for selecting files from your computer, and Flmngr.upload({params}) for uploading them to the server into the file manager storage.

Using these methods together lets you select files and upload them to a specified or default directory on the server.

Key options for file selection include acceptExtensions and isMultiple, though note that not all browsers support them.

For uploads, the dirUploads parameter specifies the target directory. In this sample, it is set to "/", meaning the root of the file manager storage (uploads will never go outside the configured storage).

The mode parameter controls how naming conflicts are handled — either automatically renaming uploaded files or showing a dialog to resolve conflicts and specify new names.

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 uploading files
  elBtn.addEventListener("click", () => {
    uploadFiles();
  });
}

function uploadFiles() {
  Flmngr.selectFiles({ 
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: (files) => {
      
      Flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        mode: "ASK",
        onFinish: (uploadedFiles) => {
          showUploadedImages(uploadedFiles);
        }
      });
      
    }
  });
  
} 

function showUploadedImages(uploadedFiles) {
  let elImages = document.getElementById("images");
  elImages.innerHTML = "";
  
  let elP =  document.createElement("p");
  elP.textContent = uploadedFiles.length + " images uploaded";
  elImages.appendChild(elP);
  
  for (let uploadedFile of uploadedFiles) {
    let el = document.createElement("div");
    el.className = "image";
    elImages.appendChild(el);   
    
    let elImg = document.createElement("img");
    elImg.src = uploadedFile.url;
    elImg.alt = "Image selected in Flmngr";
    el.appendChild(elImg);
    
    let elP = document.createElement("p");
    elP.textContent = uploadedFile.url;
    el.appendChild(elP);
    
  }        
}

<h2 class="mb-3">Flmngr: Upload Images</h2>

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

<h4 class="mt-5">Upload images</h4>
<div id="images">
  No images uploaded yet.
</div>

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

h2 {
  font-weight: bold;
}

#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;
    
    img {
      max-height: 350px;
      border: 1px solid #DDD;
    }
    
    p {
      margin: 5px 0 0 0;
      font-size: 14px;
      color: #444;
    }
  }
  
}

Upload Files

When to use

How it works

How to start using