Jump to content
  • 0

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



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
          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");
          error: function(data) {
            console.log("Post Failure");
      // 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.onloadend = function() {
          var fileData = reader.result;
          // Call the caspioPostFile plugin
          $(this).caspioPostFile(fileData, leFile.name);
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...