javascripthtmlgoogle-apps-scriptgoogle-drive-api

Signature pad is not sending the signature to google drive folder

I made an HTML, CSS, and JS (GS) program with Google App Scripts. The web app launches and the app works fine just the send button doesn't send the picture of the signature drawn on the canvas to the Google Drive folder. The send button is supposed to convert the signature drawn into a PNG and send it to the linked Google Drive folder.

HTML:


<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Signature Pad</title>
    <link rel= "stylesheet" href="style.css">
  </head>
 
 
  <body>
    <div id = "app" class = "container">
        <div class = "margin text-center">
        <div class = "canvas mx-auto"> 
          <h1> Important Contract </h1>
          <p> Description </p>
        <canvas id = "sig" width = "500px" height = "500px" class = "border"> </canvas>
        <div> 
            <button type="button" class="btn btn-dark" id = "clearSig">Clear</button>
            <button type="button" class="btn btn-dark" id ="send">Send</button>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
    <script>

        var signaturePad;
          function setupSignatureBox(){
            var canvas = document.getElementById("sig");
            signaturePad = new SignaturePad(canvas);
          }

          function clearSignature(){
            signaturePad.clear();
          }

          function sendToDrive(){
            signaturePad.toDataURL();
            google.script.run.recieveSignature(imageData);
          }

          document.getElementById("clearSig").addEventListener("click",clearSignature);
          document.getElementById("send").addEventListener("click",sendToDrive);
          document.addEventListener("DOMContentLoaded",setupSignatureBox);
    </script>
  </body>
</html>

JS (GS) :

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function recieveSignature(encodedImage){
 
  const data = encodedImage.split(",")[1];
  const dataDecoded = Utilities.base64Decode(data);
  const signatureAsPictureBlob = Utilities.newBlob(dataDecoded).setName("somefile.png");
  DriveApp.getFolderById(GOOGLE-DRIVE).createFile(signatureAsPicture);

}
Solution

  • Signature Pad:

    I just ran it as a dialog. I commented all of the modifications

    function recieveSignature(encodedImage){
  console.log('received Signature')
  Logger.log(JSON.stringify(encodedImage))
  const data = encodedImage.split(",")[1];
  const dataDecoded = Utilities.base64Decode(data);
  const signatureAsPictureBlob = Utilities.newBlob(dataDecoded).setName("somefile.png");
  DriveApp.getFolderById(gobj.globals.folder1id).createFile(signatureAsPictureBlob);//added my own folder id and added the Blob to the end of the variable which you left off

}

function launchSignatureDialog() {
  SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2').setHeight(400).setWidth(800),"Signature Dialog");
}

    html:

    <!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Signature Pad</title>
    <link rel= "stylesheet" href="style.css">
  </head>
 
 
  <body>
    <div id = "app" class = "container">
        <div class = "margin text-center">
        <div class = "canvas mx-auto"> 
          <h1> Important Contract </h1>
          <p> Description </p>
        <canvas id = "sig" width = "500px" height = "500px" class = "border"> </canvas>
        <div> 
            <button type="button" class="btn btn-dark" id = "clearSig">Clear</button>
            <button type="button" class="btn btn-dark" id ="send">Send</button>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
    <script>
     var signaturePad;
     window.onload = function() {
      document.getElementById("clearSig").addEventListener("click",clearSignature);
      document.getElementById("send").addEventListener("click",sendToDrive);
      
     }
        
          function setupSignatureBox(){
            //console.log("setupSignatureBox")
            var canvas = document.getElementById("sig");
            signaturePad = new SignaturePad(canvas);
          }

          function clearSignature(){
            signaturePad.clear();
          }
      function sendToDrive(){
        console.log('sendToDrive')
        console.log('signaturePad: %s',JSON.stringify(signaturePad))
        let imageData = signaturePad.toDataURL();
        console.log('just before google.script.run');
        google.script.run
        .withSuccessHandler(() => {google.script.host.close();})
        .recieveSignature(imageData);
      }
          document.addEventListener("DOMContentLoaded",setupSignatureBox);
          
      //console.log("End of Script");
    </script>
  </body>
</html>

    The image:

    enter image description here