Upload images with rename hook

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

<h1 class="h5 mb-3">Flmngr: upload images (with rename hook)</h1>
<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" 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>

// In real app replace with:
// import Flmngr from "flmngr";
import Flmngr from "https://cdn.skypack.dev/flmngr";

Flmngr.load({
  apiKey: "FLMNFLMN",
  urlFileManager: 'https://fm.flmngr.com/fileManager',
  urlFiles: 'https://fm.flmngr.com/files',
  hookBeforeUpload: (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: () => {
    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: "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);

  }        
}

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

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