Forum Discussion

HeidiBeach's avatar
HeidiBeach
Qrew Member
6 years ago

How to upload an image file from a custom HTML page into QB?

The company I work for is required to collect signatures, thumbprints and photo ID of all customers. We are using Quick Base to store customer information (which includes sale information). Since Quick Base does not (natively) support any of the above, I have made a custom HTML/Javascript page that will gather this information, and I have the link set up in QB to access that page. What I'm having trouble with is how to get the image that is captured on the custom page back into QB.

This is an example of the code I'm working with right now (for the sake of brevity, I'm only including the parts regarding the signature capture):
<!DOCTYPE html>

<html>
<head runat="server">
  <title>Signature Capture</title>
  <script type="text/javascript">
    var imgWidth;
    var imgHeight;
    function StartSign()
     {
        var canvasObj = document.getElementById('cnv');
        canvasObj.getContext('2d').clearRect(0, 0, canvasObj.width, canvasObj.height);
        imgWidth = canvasObj.width;
        imgHeight = canvasObj.height;
var message = {"firstName": "", "lastName": "", "eMail": "", "location": "",  "imageFormat": 2 , "imageX": imgWidth, "imageY": imgHeight, "imageTransparency": true , "imageScaling": false, "maxUpScalePercent": 0.0, "rawDataFormat": "ENC" , "minSigPoints":25, "penThickness": 3, "penColor": "#000000"};
        document.addEventListener('SigCaptureWeb_SignResponse', SignResponse, false);
        var messageData = JSON.stringify(message);
        var element = document.createElement("SigCaptureWeb_ExtnDataElem");
        element.setAttribute("SigCaptureWeb_MsgAttribute", messageData);
        document.documentElement.appendChild(element);
        var evt = document.createEvent("Events");
        evt.initEvent("SigCaptureWeb_SignStartEvent", true, false);
        element.dispatchEvent(evt);
    }
    function SignResponse(event)
    {
        var str = event.target.getAttribute("SigCaptureWeb_msgAttri");
        var obj = JSON.parse(str);
        SetValues(obj, imgWidth, imgHeight);
    }
    function SetValues(objResponse, imageWidth, imageHeight)
    {
        var obj = JSON.parse(JSON.stringify(objResponse));
        var ctx = document.getElementById('cnv').getContext('2d');

            if (obj.errorMsg != null && obj.errorMsg!="" && obj.errorMsg!="undefined")
            {
                alert(obj.errorMsg);
            }
            else
            {
                if (obj.isSigned)
                {
                    var img = new Image();
                    img.onload = function ()
                    {
                        ctx.drawImage(img, 0, 0, imageWidth, imageHeight);
                    }
                    img.src = "data:image/png;base64," + obj.imageData;
                }
            }
    }
</script>

</head>
<body>
  <h2 style="font-family:arial;">Signature Capture</h2>
  <table border="0" cellpadding="0" width="300">
    <tr>
      <td height="100" width="300">
        <canvas id="cnv" name="cnv" width="300" height="100"></canvas>
      </td>
    </tr>
  </table>
 <input id="SignBtn" name="SignBtn" type="button" value="Start Sign" onclick="StartSign()" />
</body>
</html>​
I know Quick Base does not support JSON strings, but unfortunately, the Chrome extension I am using to capture the signature only uses JavaScript/JSON.

What do I need to do to get this data into an image that can be saved and loaded back into QB? I can't seem to make heads-or-tails of the API_UploadFile call. I know that needs to be in XML format to work, but how can I convert what I have to XML? And assuming that's possible, how do I structure the code? (Like, where in the file does the new code need to be inserted?)

Just as an FYI, this coding does NOT need to be scaled at all. I am the ONLY person who will be entering this information into Quick Base and accessing the custom HTML page, and only at a single computer. (We're a very small company.)

Thank you in advance!
------------------------------
Heidi Beach
------------------------------
APIs and custom code