Struggling to send a picture to Caspio Table. Text Works fine, Picture Won't.

[AndrewMcB]

Hey Everyone, all types or suggestions would be loved and appreciated. 

I am trying to use the V2 REST API to upload a photo into Caspio table. The code below is the only success that I have at Caspio not throwing an error at me. But the Photo gets uploaded as a long string that Caspio is unable to convert back into a photo. Any suggestions of how to get a photo into a dang table would be appreciated. I have switched the content type to everything I can imagine, and looked at all Caspio and Swagger documentation without luck. (Yes I know there are security concerns with this code, this is just to get the dang thing working)

 

<title>Photo Uploader</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<h1>Caspio File Upload</h1>

<input id="customFile" name="file" type="file" /><button id="uploadButton">Upload File</button> <script>

      // Caspio API credentials

      var clientId = "clientId ";

      var clientSecret = "clientSecret ";

      var cbIntegrationId = "cbIntegrationId ";

      var accessToken = "accessToken "

 

      // Define the caspioPostFile plugin

      $.fn.caspioPostFile = function(fData, fName) {

        // Encode the file data as a base64 string

        var fileData = window.btoa(fData);

 

        // Run POST call

        $.ajax({

          url: "https://" + cbIntegrationId + ".caspio.com/rest/v2/tables/Photos_Test/records",

          type: "POST",

          data: JSON.stringify({

            "Project_ID": "1111",

            "Inspection_Count": "1",

            "Photos": fileData

          }),

          contentType: "application/json",

          processData: false,

          cache: false,

          headers: {

            "Authorization": "bearer " + accessToken,

            "Content-Type": "application/json",

            "Accept": "application/json"

          },

          success: function(data) {

            console.log("Post Success");

            console.log(data.Result);

          },

          error: function(data) {

            console.log("Post Failure");

            console.log(data.responseJSON);

          }

        });

      };

 

      // Bind the click event to the upload button

      $("#uploadButton").click(function() {

        // Get the selected file

        var leFile = $("#customFile")[0].files[0];

        var reader = new FileReader();

 

        // Read the file data as a base64 string

        reader.readAsDataURL(leFile);

        reader.onloadend = function() {

          var fileData = reader.result;

          // Call the caspioPostFile plugin

          $(this).caspioPostFile(fileData, leFile.name);

        };

      });

    </script>

 

[Tubby]

Not sure if this thread will help as I have not really tried uploading files through REST API: