Skip to content
Rapidly Create A Powerful Image Manager In NodeJS

Rapidly Create A Powerful Image Manager In NodeJS

Uploading and downloading images is probably one of the most widely utilized use cases in any modern web application. The process is necessary but sometimes it becomes repetitive and not worthy enough to invest lots of developer time and effort to implement this module. 

Froala realized this limitation and incorporated efficient server-side image management with WYSIWYG HTML Editor by developing multiple SDKs to help accelerate the development process at the server end.

In this blog post, we’ll look at how we can quickly create a powerful image manager in NodeJS using the Froala WYSIWYG Editor SDK Node package. 

How can I install the Froala Editor SDK Node package?

Froala provides a full-featured SDK for NodeJS to simplify and streamline the development process in the NodeJS development environment. You can get the NodeJS Froala WYSIWYG Editor SDK using npm by running the following command. 

npm install wysiwyg-editor-node-sdk

Once you have installed the SDK, you can simply import it into your NodeJS application for further development usages. Just like any other package import, the following line will make the Froala Editor available within the defined scope. 

var FroalaEditor = require('PATH_TO_THE_SDK/lib/froalaEditor.js');

How can I initialize the JavaScript editor on the client-side?

Before moving forward with handling the upload queries on the NodeJS backend server, let’s initialize and configure the browser code to call relevant endpoints for uploading and deleting the images from the server. 

Initializing the Froala Editor is as simple as creating a new object in the JavaScript code. You can initialize the Froala Editor as follows.

<script>
  new FroalaEditor('.selector')
</script>

After initializing the editor, let’s additionally pass the options JSON object to the FroalaEditor constructor with relevant URL endpoints against the upload and delete properties. 

The final code after initializing and defining the image manager URLs should like below.

<script>
  new FroalaEditor('.selector', {
    // Set the image upload URL.
    imageManagerLoadURL: '/load_images',

    // Set the image delete URL.
    imageManagerDeleteURL: '/delete_image'
  })
</script>

What is an easy way to configure the load request?

Remember that we used the /load_image URL endpoint in browser code to capture the load requests for images? Now, let’s look at the server-side implementation that actually addresses that query.

The server implementation is responsible for receiving the request and handling it appropriately. The WYSIWYG editor’s NodeJS SDK has a method that can be used to load all the images provided in the request inside a specified folder on the server. This method is called list and is defined in the Image class inside the FroalaEditor namespace. 

The following piece of code will place all the image uploads in the uploads directory on the server. 

FroalaEditor.Image.list('/uploads/', function(err, data) { ... });

Can I receive the delete request on Node Backend?

Similar to how we captured the upload request using the dedicated list method, Froala SDK also provides a method to delete an already uploaded image on the server. 

The server should listen for any delete request and process it accordingly. The path of the image to be deleted is specified in the request body inside request.body.src. The delete method of the Image class from the NodeJS SDK can eventually remove the image at the provided path from the server. 

FroalaEditor.Image.delete(req.body.src, function(err) { ... });

How does my Node code (after configuration) look like?

The following code is your end-to-end image manager in NodeJS that allows you to upload and delete images on the server using Froala Editor SDK.

// Importing dependencies
var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var path = require('path');
var fs = require('fs');
var gm = require('gm').subClass({imageMagick: true});
var FroalaEditor = require('PATH_TO_FROALA_SDK/lib/froalaEditor.js');

// Middleware definition
app.use(express.static(__dirname + '/'));
app.use('/bower_components',  express.static(path.join(__dirname, '../bower_components')));
app.use(bodyParser.urlencoded({ extended: false }));

// API endpoints
app.get('/load_images', function (req, res) {

  FroalaEditor.Image.list('/uploads/', function(err, data) {

    if (err) {
      return res.status(404).end(JSON.stringify(err));
    }
    return res.send(data);
  });
});

app.post('/delete_image', function (req, res) {

  FroalaEditor.Image.delete(req.body.src, function(err) {

    if (err) {
      return res.status(404).end(JSON.stringify(err));
    }
    return res.end();
  });
});

As you can see, creating image managers in NodeJS applications with Froala SDK is pretty simple and quick. With minimum low-level code requirements, you can easily create real-time image managers and integrate them into your applications. 

Install NodeJS Froala WYSIWYG Editor SDK and start creating powerful image managers in NodeJS.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *