Rapidly Create A Powerful Image Manager In NodeJS

Anyone who has ever designed or developed a modern web application knows that uploading and downloading images is a very common and recurring task. The process is necessary but repetitive and often takes up a fair amount of your development time. 

Because we have been through it ourselves, here at Froala, we recognize this pain point. As a result, we designed efficient server-side image management for our WYSIWYG HTML Editor.  In short, we have developed multiple SDKs to help accelerate your development process at the server end.

In this blog post, we’ll look at how you can quickly create a powerful image manager in NodeJS using the Froala WYSIWYG HTML 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 simply import it into your NodeJS application.  Similar to any other package import, the following line makes the Froala Editor available within your 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 your upload queries on the NodeJS backend server, let’s initialize and configure the browser code to call your endpoints for uploading and deleting 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 also pass the options JSON object to the FroalaEditor constructor with your URL endpoints against the upload and delete properties. 

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

<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 receives requests and handles them accordingly. The WYSIWYG editor’s NodeJS SDK has a method you can use to load all the images 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?

Just like we captured the upload requests using the dedicated list method, the Froala SDK also provides a method to delete an already uploaded image on the server. 

The server listens for delete requests and processes them accordingly. You specify the path of the image you want to be deleted in request.body.src. The delete method of the Image class from the NodeJS SDK removes the image at the provided path from the server. 

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

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

The following code is your end-to-end image manager in NodeJS. It lets you upload and delete images on the server using the 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 quick and easy. 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.