ImageToBase64 - Custom Module - NodeJS

Hi.
Trying out the new Wappler Extensibility prowess - custom modules - I created and implemented a NodeJS module which accepts an image path and return is base64 encoded string.
This string can be used to store images in DB or just to render it on the client side as src for HTML image tag img.
Its a very simple use case which does not do much in terms of custom code. But this showcases how powerful this feature is.

Package link: https://www.npmjs.com/package/image-to-base64

You can download the module js & module hjson file here: image-to-base64-modules.zip (1001 Bytes)

I’ll try to explain relevant stuff. Rest explanation can be found here and here. Let’s start:

1. Install the package. Go to terminal and execute command npm i -S image-to-base64
   
   

   1900×180 23.2 KB
2. Create the custom module folder structure as explained in the main post, and add 2 files - js (main module) & hjson (custom definition for module to appear in the Wappler UI).
   
3. In the js, we include the package and a path library available in Wappler.

const imageToBase64 = require('image-to-base64');
const { toSystemPath } = require('../../../lib/core/path');

exports.getValue = function (options) {
    let path = toSystemPath(this.parseRequired(this.parse(options.path), 'string', 'fs.exists: path is required.'))
    return imageToBase64(path);
};

4. The Wappler path library is needed to convert the file path we will send from server action to our custom module. This is required since module could be in a different folder hierarchy than the image. In my use case, image resides in /public/Uploads/abc.png. Using path library returns a ‘parsed’ path which can then be passed to the image-to-base64 package.
5. this.parse is server side syntax for accessing objects. This is equivalent to dmx.parse you would have come across in client side. Read more about it here.
6. imageToBase64() function returns either base 64 encoded string or an error - using a promise (you can read about it in package docs). Server action will take care of both cases automatically, so we don’t have to handle it here. (Thanks @patrick for helping out here.)
7. On to the hjson file.

{
  type: 'imageToBase64_getValue',
  module : 'imageToBase64',
  action : 'getValue',
  groupTitle : 'My Modules',
  groupIcon : 'fas fa-lg fa-project-diagram comp-images',
  title : 'Image to Base64',
  icon : 'fas fa-lg fa-file-alt comp-images',
  dataPickObject: true,
  properties : [
    {
      group: 'Source Image',
      variables: [
        { name: 'name', optionName: 'name', title: 'Name', type: 'text', required: true, defaultValue: ''},
        { name: 'path', optionName: 'path', title: 'Path', type: 'text', required: true, defaultValue: '', serverDataBindings: true},
        { name: 'output', optionName: 'output', title: 'Output', type: 'boolean', defaultValue: false }
      ]
    }
  ]
}

8. The name property is required if we want to process any output from the custom module. Its a reserved keyword - optionName: 'name'.
9. The path property expects a file path. In my case, I am passing the path from an upload image step’s path property.
10. The option property is also a built-in kind of property which adds the output checkbox to the module properties section.
11. This module does not return anything other than a string value when runs successfully. Hence I have not configured a dataScheme for it in hjson. In case you custom module returns a complex data, you might have to set that up. From my understanding, this works similar to a Set Value action step which can be used a simple variable or a complex one with object type and a schema.
12. Once js & hjson are both saved, just refresh the server action panel and try to add new item to any server action. The image-to-base64 custom module should show up just like other native modules.
    
    

    3763×737 47.9 KB
13. After adding it, you should see the properties for this action step as set in the hjson file.
    
    

    4398×523 14.3 KB
14. You can easily match the various properties and icons and colors etc from hjson in the UI. More details can be found in the main post.
15. If all goes ok, running the server action with an image in request should output the base64 encoded string with key as name of the step, img64 as per screenshots.
16. The library also works with URLs. So you should also be able to pass that in the path input and get base64 string in response.

Hope this gives some insight into how great this feature is. I am new to NodeJS, so I might have done something wrong. Any improvements and suggestions are welcome.

Sid