Rename Files on Upload

File Manager live demo with code sample 13 of 27

When you need not only to upload files or images, but also to set predictable names, you can intervene in the upload process and handle it programmatically.

This feature is set globally — meaning that you can handle file uploads everywhere, whether they are done via the file manager dialog or a direct upload call, even if the content editor (N1ED, TinyMCE, or CKEditor) initiates it. Every file uploaded using the Flmngr File Manager will be under your control during the upload stage.

The Flmngr.load({params}) API method supports an option hookBeforeUpload.

Please pass this parameter exactly to this function used for preloading, and do not confuse it with passing it into Flmngr.open({params}), because that would be too late: some upload calls might be missed with that approach. This hook has page-global logic, giving you full control over uploads regardless of the initial action that triggered them.

Here you can see how to manipulate the files parameter of the hook. It consists of standard File browser objects.

The hook expects you to modify this file list, which will then be used for the actual upload. Due to browser limitations, File objects are immutable, but you can clone them and set a different name, as illustrated in this sample.

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',
  hookBeforeUpload: (files) => {
    console.log(files);
    for (let i=0; i<files.length; i++) {
      
      // This is a File object. Set a new name for the file like "1.png",
      // where "1" is a number of the file, and "png" - its original extension.
      let file = files[i];
      
      let ext = null;
      let indexDot = file.name.lastIndexOf(".");
      if (indexDot > -1)
        ext = file.name.substr(indexDot + 1);

      let newFileName = (i + 1) + (ext === null ? "" : ("." + ext));
      let blob = file.slice(0, file.size, file.type);
      files[i] = new File([blob], newFileName, {type: file.type});
    }
  },
}, {
  onFlmngrLoaded: () => {
    attachOnClickListenerToButtons();
  }
});

function attachOnClickListenerToButtons() {
  
  let elBtn = document.getElementById("btn_upload");
  
  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
    
  // Add a listener for uploading files
  elBtn.addEventListener("click", () => {
    uploadFiles();
  });
  
  
  elBtn = document.getElementById("btn_browse");
  
  // Style button as ready to be pressed
  elBtn.style.opacity = 1;
  elBtn.style.cursor = "pointer";
  
  // Add a listener for browse files button
  elBtn.addEventListener("click", () => {
    browseFiles();
  });
  
  let elLoading = document.getElementById("loading");
  elLoading.parentElement.removeChild(elLoading);
}

function browseFiles() {
  Flmngr.open({
      isMultiple: null,
      acceptExtensions: ["png", "jpeg", "jpg", "webp", "gif"],
      onFinish: (pickedFiles) => {
        showUploadedImages(pickedFiles);
      }
    });
}

function uploadFiles() {
  Flmngr.selectFiles({ 
    acceptExtensions: ["png", "jpg", "jpeg", "webp", "gif"],
    isMultiple: true,
    onFinish: (files) => {
      
      Flmngr.upload({
        filesOrLinks: files,
        dirUploads: "/",
        mode: "OVERWRITE",
        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);
    
  }        
}

<div style="display:none">
  <div id="editor"></div>
</div>

<h2 class="mb-4">Flmngr: Upload Images (With Rename Hook)</h2>
<p style="font-size: 14px">
  File names will be automatically changed to <code>1.png</code>, <code>2.jpeg</code>, etc. on upload.
  <br/>
  Alsoб an overwrite mode is forced in this demo.
</p>
 
<div id="btn_upload" class="btn btn-primary btn-lg" style="opacity:0.2;cursor:default">Upload</div>

<div id="btn_browse" class="btn btn-link btn-lg" style="opacity:0.2;cursor:default">Browse</div>

<div id="loading" style="font-size:12px">Loading file manager...</div> 


<h4 class="mt-5">Uploaded 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;
    }
  }
  
}

code {
  color: #333;
  border: 1px solid #AAA;
  padding: 2px 4px;
}

Rename Files on Upload

When to use

How it works

How to start using