How did I impelement Signature Pad in ZereOne?


In what projects I used it


You are developing software for a shipping company?

You must keep the customer’s confirmation of receipt of delivery or you want to confirm the customer’s information when you submit the order.

This is the situation you can use this js library “signature_pad”

In bank projects

When applying for an online loan, you will have a hard time confirming a person’s identity! Because nowadays the network is full of scammers.
By obtaining a signature you will be sure that it is not a robot and it is not a scammer.

How to install it?

You can add it directly to your page using <script> tag.

You can select a different version at

<script src=""></script>

How implement it in ZeroOne?

Plugin Widgets

The difference between ZeroOne and others nocode platform is using custom code.

In Plugin Widgets you should add cdn link in Third-party scripts

Third Party

There you also can add style js libraries
You should add in html canvas tag

For it you can use this function

function appendHtml(el, str) {
   var div = document.createElement("div");
   div.innerHTML = str;
   while (div.children.length > 0) {
  const element = `<div class="signature-pad--body">
    <canvas id="signature-pad-canvas"></canvas>
  <div class="signature-pad--footer">
    <div class="signature-pad--actions">
      <div class="btns">
        <button type="button" id="save" data- 

All of these actions should implemented in Mount Part

In update part you should create SignaturePad like that

const canvas = document.getElementById("signature-pad-canvas");
const signaturePad = new SignaturePad(canvas, {
  backgroundColor: "rgb(255, 255, 255)",

More informations

After that You should get a panel like this

After vreating new Pad

For Resizing window we use this function

function redraw() {
  const context = canvas.getContext("2d");
  context.strokeStyle = "blue";
  context.lineWidth = "5";
  context.strokeRect(0, 0, window.innerWidth, window.innerHeight);

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

window.onresize = resizeCanvas;

What format will the file be in?


Using Signature js library we can get image in format dataUrl!

 const dataURL = signaturePad.toDataURL("image/jpeg");

To Blob?

To upload this image file we using function DataUrlToBlob

function dataURLToBlob(dataURL) {
  var parts = dataURL.split(";base64,");
  var contentType = parts[0].split(":")[1];
  var raw = window.atob(parts[1]);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);

  return new Blob([uInt8Array], { type: contentType });


We also can upload this image in Formdata format

    const formData = new FormData();
    formData.append("image", dataURLToBlob(dataURL));

How to upload file to Storage?

You can use for uploading axios

We should connect axios, for that we use Third Party

How to add axios
You can get cdn link here

We also should create backend Workflow


To trigger frontend workflow

To trigger frontend workflow we can use Plugin Events.

Next, in page workflows, create an element trigger and an element with your plugin widget. In the event specify upload_file

//To trigger workflow 

Possible errors

ERROR: Cannot read properties of undefined (reading ‘id’)

Storage To fix this error , we must specify the binary property as image



  • URLをコピーしました!