BASE64 Image From WebHook

Ed Martin

Using an endpoint URL for a Webhook post out of the forms provider, I've mapped the relevant fields and receive a 200 for incoming JSON blobs.

The base64 image is not inserting an image into the table and I'm not sure what direction to go next.  The resulting webhook post leaves the image field empty.

I've tried variations of the input: json dot notation - 
image: base64Upload = input: json request.data.base64Upload.url.data
                                                             request.data.base64Upload.url
                                                             request.data.base64Upload

The entire submission can be seen here -  https://webhook.site/#!/332f1647-583c-4b13-9a9b-cf4b2fd5d9cd/af44cfcb-fdf3-4dc2-8450-7d992b64daf3/1

Here is a snippet: 
{
"request": {
"data": {
"employerName": "Widgetizer Widgeteers",
"employerAddress01": "3434 Jungle Dr",
"employerAddress02": "Suite Tree",
"employerCity": "BanannaVille",
.
.
"trusteeLastName": "Diligence",
"base64Upload": [
{
"storage": "base64",
"name": "clark-kent-drivers-license-645563ec-5bcd-4306-b624-31c3250c1d30.jpeg",
"url": "data:image/jpeg;base64,/9j/4AAQ....1Kn/9k=",
"size": 101801,
"type": "image/jpeg",
"originalName": "clark-kent-drivers-license.jpeg"
}
],
"controlGroup": "true",
"entityType": "S-Corp"
},

Ed Martin

Run & Debug results are: 

{"id":11,"created_at":1653605202455,
   "user_id":0,
   "business_id":0,
   "employerName":"Widgetizer Widgeteers",
   "employerAddress01":"3434 Jungle Dr",
   "employerAddress02":"Suite Tree",
   "employerCity":"BanannaVille",
   "employerState":"SZ",
   "employerZip":"98125",
   "employerPhone":"(213) 555-1212",
   "employerEmail":"monkey@example.com",
   "base64Upload":
      {"path":"",
      "name":"",
      "type":"",
      "size":0,
      "mime":"",
      "meta":{}}}

Unknown

Hello Ed, you will need to use a conversion filter to decode the base64 encoding in order to get the image. You might need to try base64_decode and base64_decode_urlsafe to see which works.

https://docs.xano.com/working-with-data/data-type-filters/conversion-filters

Ed Martin

Thanks .  I read and watched a bunch of videos on Base64 and have a deeper understanding.  Your suggestion makes a lot more sense now. 

I tried both, base64_decode and base64_decode_urlsafe, and hit an error -

{"message":"strtr(): Argument #1 ($string) must be of type string, array given"}
[Screen Shot 2022-05-26 at 11.35.07 PM.png]

Ray Deck

 That error message comes from PHP which is what Xano uses under the covers. The implication is that the url is not a string. Are you in a position to replicate the upload process repeatedly using the debugger? the utility "stop and debug" function is super helpful for introspecting to find out what is in that "url" variable at that particular moment. 

Unknown

 try to remove the following portion in the url variable as it is not part of the base64 encoding of the image.
data:image/jpeg;base64,

Ed Martin

, Yes, I can replicate through the debugger.
Added the Stop & Debug function. 

The data going into _input_ is the same as what was sent with the webhook.

Stop & Debug _after_ the Add Record function, is not executed as the error is produced at the Add Record step. 
Request History shows:
Status: 500 Internal Server Error

Input:
{"params":{"formId":"628be96eb223fea7f0262442"},
  "request":{"data":{"ez-k-001a":true,
  "employerEin":"",
  "employerZip":"",
  "base64Upload":[{
    "url":"data:image/jpeg;base64,/9j/4AAQSkAKKKKAP/2Q==",
    "name":"Titan-Bank-09-review09-5b846c41-b602-4e0e-b233-7d5bbd5a11e0.jpg",
    "size":42061,
    "type":"image/jpeg",
    "storage":"base64",
    "originalName":"Titan-Bank-09-review09.jpg"}],
 
On the Function stack side, I see this  (after making a change to allow that output to surface):
base64Upload: {
path: ,
name: ,
type: ,
size:  0,
mime: ,
meta: {}

So perhaps, "url" and "path" need some duct tape?

Ed Martin

 Is there a way in Xano to clip to the comma?
How would I remove that on the Xano side?
Thanks in advance  and  

Ray Deck

 The input shows the base64input as an array holding an object. The output looks like just an object. What's the structure of the table? Do we need to unwrap the object from the array in order to insert it into your table? To unwrap, you could apply the "shift" filter to the base64upload member, which would take the first value of the array. Basically you would go from [{a:1}] to {a:1} - which looks more like what your table wants!