Edit Image and Save as Base64

File Manager live demo with code sample 15 of 27

If you want to edit an image from your file manager storage—or even an external image—without saving it back, you can call the image editor directly and handle the result manually.

After editing, you can apply your own logic, such as displaying the edited image in the UI or sending it to another service, depending on your workflow.

Here we use the Flmngr.edit({params}) method to launch the image editor.

As in the simple image editor example, we pass the url parameter to specify the image URL, which can be hosted in your file manager storage or on any external server.

If this URL is on a different host (different protocol, domain, or port) than your app, make sure the host sets proper CORS headers, as required by browser security policies.

Wait for the onSave(onExport, onClose) callback, which lets you decide what to do with the edited image.

Within this callback, use the provided onExport(name, ext, quality, onClose) method to export the image with a specified name and optimization options. In its onClose(imageBlob) callback, you can then use the image in your app as needed.

If an error occurs during editing, or the user cancels in your custom save dialog, you can simply avoid calling onClose(). This keeps the editor open until the image is successfully processed or the user manually closes the editor.

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'
}, {
  onFlmngrAndImgPenLoaded: () => {
    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 editing currently shown image
  elBtn.addEventListener("click", () => {
    editImage();
  });
}

function editImage() {
  
  Flmngr.editAndUpload({
    url: decodeURI(document.getElementById("image").getAttribute("src")),
    onSave: (urlNew) => {
     
      animateLoading();
      
      // Image edited, saved and uploaded to server: change the image
      // `getNoCacheUrl` will add `?no-cache=time` parameter to force image reloading in the browser
      let elImg = document.getElementById("image");
      elImg.setAttribute("src", Flmngr.getNoCacheUrl(urlNew));
      
    },
    onFail: (error) => {
      alert("Error: " + error);
    }
  });
}

// Just for animating image while it is being reloading after change
function animateLoading() {
  let elImg = document.getElementById("image");
  let onLoaded = () => {
    elImg.classList.remove("loading");
    elImg.removeEventListener("click", onLoaded);
  }
  elImg.classList.add("loading");
  elImg.addEventListener("load", onLoaded);
}

<h2 class="mb-3">Flmngr: Edit and Save Image</h2>

<div id="btn" class="btn btn-primary btn-lg" style="opacity:0.2;cursor:default">Edit image</div>

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

<p>
  <img id="image" style="max-width:500px" src="https://fm.n1ed.com/files/paper.png" alt="Some image">
</p>

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

h2 {
  font-weight: bold;
}

img {
  max-width:500px;
}

p {
  margin-top: 20px;
}

@-webkit-keyframes loading-animation {
  50% {opacity: 0.3;}
}

@keyframes loading-animation {
  50% {opacity: 0.3;}
}

.loading {
  animation: loading-animation 1s infinite;
}

Edit Image and Save as Base64

When to use

How it works

How to start using