WIP: Save

app/api/uploadSignature.json

@@ -17,8 +17,7 @@
           "value": "{{$_POST.imageData.replace(/^data:image\\/\\w+;base64,/, \"\")}}"
         },
         "meta": [],
-        "outputType": "text",
+        "outputType": "text"
-        "output": true
       },
       {
         "name": "saveSignatureBinary",
@@ -26,7 +25,8 @@
         "action": "upload",
         "options": {
           "fields": "{{decodedImage}}",
-          "path": "/public/signatures/Sig_{{NOW.timestamp}}.png"
+          "path": "/",
+          "template": "{guid}"
         },
         "meta": [
           {

public/PDF/dummyFunctions.js

@@ -22,6 +22,30 @@ async function toBase64(filePath) {
 }
 
 
+function saveSignatureTEST1() {
+    // Capture the Base64 image data from the canvas
+    const canvas = document.getElementById('signatureCanvas');
+    const imageData = canvas.toDataURL('image/png'); // Base64-encoded image
+
+    // Use Wappler's Server Connect to send a POST request
+    dmx.parse('serverconnect_sign.load({imageData: "' + imageData + '"})');
+    console.log("SSTEST: Finish Run, Anything happen?")
+}
+
+
+function saveSignatureTEST2() {
+    const canvas = document.getElementById('signatureCanvas');
+    const imageData = canvas.toDataURL('image/png'); // Convert the canvas to a Base64 image string
+
+    dmx.parse('serverconnect_sign.load({image: "' + imageData + '"})').then((response) => {
+        const uploadedSignature = document.getElementById('uploadedSignature');
+        uploadedSignature.src = response.fileUrl; // Set the uploaded file URL to the image element
+    }).catch((error) => {
+        console.error("Error uploading signature:", error);
+    });
+}
+
+
 /** 
 
 const terminal = document.getElementById('terminal');

public/PDF/libPDFscripts.js

@@ -1,8 +1,15 @@
 // JavaScript Document
 
+console.log("LIBRARY: libPDFscripts.js")
 //Use this function as a start - to pass the path, then datasource to update with pdfbytes, then download -- Maybe combine into one file?
 //wich is more efficient?
 
+let popover = new bootstrap.Popover(popoverTrigger, {
+    content: "This dropdown is disabled.",
+    placement: "top",
+    trigger: "manual"
+});
+
 //filepath = /PDF/XXX.pdf, dataSource = datastore.var
 // *** Use of 'rest paramater' syntax to add extra datasources at the end.
 //return array of datasources i.e [datastore,data_view1] and pass that array to  updatePdfFields
@@ -99,3 +106,5 @@ function generateRandomFilename() {
     console.log("Random Filename: ", filename);
     return filename;
 }
+
+

public/dmxAppConnect/config.js

@@ -65,16 +65,6 @@ dmx.config({
     ]
   },
   "index": {
-    "global": [
-      {
-        "type": "text",
-        "name": "file"
-      },
-      {
-        "type": "text",
-        "name": "imageData"
-      }
-    ],
     "flowRunPageId": {
       "meta": [
         {

public/js/libProcessScript.js

@@ -143,7 +143,8 @@ function saveSignature() {
     const imageData = canvas.toDataURL('image/png');
     dd(imageData.length)
     // Trigger the server action and handle the response
-    dmx.parse('serverconnect_sign.load({ image: imageData })');
+    dmx.parse('serverconnect_sign.load({imageData: "' + imageData + '"})');
+    //dmx.parse('serverconnect_sign.load({ image: imageData })');
     /** 
     dmx.parse('serverconnect_sign.load', { image: imageData }).then((response) => {
         //dmx.parse('serverconnect_sign.load({image: "' + imageData + '"})').then((response) => {

views/index0.ejs

@@ -12,7 +12,7 @@
     alert: {message: "{{saveSignatureFlow}}"}
   }
 ]</script>
-<dmx-serverconnect id="serverconnect_sign" url="/api/uploadSignature" noload="true" dmx-on:start="toasts1.showSimple({message: 'Upload Start', delay: 2500, type: 'success'})" dmx-on:done="toasts1.showSimple({message: 'Upload Finished', delay: 2500, type: 'info'})"></dmx-serverconnect>
+<dmx-serverconnect id="serverconnect_sign" url="/api/uploadSignature"></dmx-serverconnect>
 <div class="modal" id="modalVerifySignature" is="dmx-bs5-modal" tabindex="-1">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
@@ -278,7 +278,7 @@
             <div id="eSignatureRowButtons" class="row ms-0 me-0 ps-0 pe-0 justify-content-center">
                 <button id="btn4_ClearSignature" class="btn btn-warning w-25 " data-bs-toggle="button" onclick="clearCanvas()" dmx-style:margin-right="'16px'">Clear Signature</button>
                 <button type="button" class="btn btn-danger w-auto visually-hidden" data-bs-dismiss="modal" dmx-bs-tooltip="'Close Signature Panel'" data-bs-trigger="hover" data-bs-placement="top" dmx-style:margin-right="'16px'">Close</button>
-                <button type="button" class="btn btn-success w-auto" onclick="saveSignature()">Save</button>
+                <button type="button" class="btn btn-success w-auto" onclick="saveSignatureTEST2()">Save</button>
             </div>
 
 

views/observationPage.ejs

@@ -1,4 +1,5 @@
 <!-- Wappler include head-page="layouts/main" fontawesome_5="cdn" bootstrap5="local" is="dmx-app" id="observationPage" appConnect="local" components="{dmxBootstrap5TableGenerator:{},dmxMasonry:{},dmxFormatter:{},dmxBootstrap5Popovers:{},dmxBootstrap5Toasts:{},dmxDataTraversal:{},dmxStateManagement:{},dmxDatastore:{},dmxValidator:{},dmxBootstrap5Offcanvas:{},dmxBootstrap5Modal:{},dmxBootstrap5Navigation:{},dmxBootstrap5Tooltips:{},dmxBootbox5:{}}" -->
+<dmx-serverconnect id="serverconnect_signature" url="/api/uploadSignature" noload="true"></dmx-serverconnect>
 <div class="modal" id="modalTestButton" is="dmx-bs5-modal" tabindex="-1">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">