Discussions

Expand all | Collapse all

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

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

    Posted 11 days ago
    Edited by Heidi Beach 11 days ago
    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
    ------------------------------


  • 2.  RE: How to upload an image file from a custom HTML page into QB?

    Posted 10 days ago
    Personally I have had the best luck using a library like this. I used the "browserfied" one and just hosted it in QuickBase itself on a file table I had created but you can host it wherever you want. I believe it also uses JSON but double check. https://github.com/tflanagan/node-quickbase

    Also checkout this site which has little helper functions on the side for using the above library. Maybe it will work better for you. https://www.quickbase.dev/#api_uploadfile


  • 3.  RE: How to upload an image file from a custom HTML page into QB?

    Posted 6 hours ago
    We're currently working on updating our API calls to be JSON based, and hope to have those available by the end of the year for general availability. Please keep an eye on our release notes each month for details on this initiative.

    In the mean-time, you could utilize the JavaScript SDK here: https://github.com/QuickbaseAdmirer/Quickbase-JavaScript-SDK within your HTML page to upload your files. The official documentation is located here: https://help.quickbase.com/api-guide/filemanagement.html and indicates that data sent to a Quick Base file attachment field needs to base-64 encoded. There's also an example of a base-64 encoded document in the API_AddRecord documentation here: https://help.quickbase.com/api-guide/add_record.html

    With all of that in mind, it still seems like your main issue is being based in JSON and converting to XML. A quick google search generated some useful results:

    There might also be jQuery libraries that could utilize for this purpose

    ------------------------------
    Eric Mohlman
    ------------------------------