Jump to content
  • 0

Submitting Files using Rest API v2 in jQuery Ajax: how does it work?


teltz

Question

Hi there!

I'm trying to create a submission page in which part of includes the option to submit a file. I am able to use the API to submit normal text info (dates/numbers/prices/etc.), but submitting files is some what of an issue. Currently, this is what I have:

The code that retrieves the file and calls the API request

leFile = $('#customFile')[0].files[0];
var formData = new FormData();
console.log("form data: " + $.type(formData))
var blob = new File([leFile], leFile.name, {type: leFile.type})
formData.append('file', blob);
$(this).caspioPostFile(formData,leFile.name,leFile.type);


The API request itself:

$.fn.caspioPostFile = function(fData,fName){
        //Get access token
        console.log($.type(fData));
        $.post(
            "https://" + cbIntegrationId + ".caspio.com/oauth/token",
            {
                grant_type: "client_credentials",
                client_id: clientId,
                client_secret: clientSecret
            },
            function(cbAuth){
                //Run POST call
                $.ajax({
                    url: "https://" + cbIntegrationId + ".caspio.com/rest/v2/files",
                    type: 'POST',
                    data: fData,
                    processData: false,
                    cache: false,
                    headers: {
                        "Authorization": "Bearer " + cbAuth.access_token,
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "Content-Disposition": "attachment; filename="+fName
                    },
                    dataType: 'json',
                    success: function (data) {
                        console.log("Post Success")
                        console.log(data.Result);
                    },
                    error: function(data) {
                        console.log("Post Failure")
                        console.log(data.responseJSON);
                    }
                });
            }
        ); 
    };

 

Now before I get this as a response, yes I have viewed almost every page on Caspio's site for documentation on rest API v2 and v1, but the problem is that none of it has any concrete examples of code for making this request in v2. The swagger site and its documentation also doesn't help my case for the same reason. I have switched the content-type from application/json to multipart/form-data and back, I have attempted adding Access Control headers, but all of it results in a failed request (returning POST 400, POST 415, or an issue with CORS policy). Does anyone know what I'm doing wrong, or has an example that I could potentially pull from?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Im just attempting to help but dont quite have time for a full solve,

Your post headers should be
'Content-Type': 'multipart/form-data' 

not "Content-Type": "application/json",
https colon  slash slash 
your caspio /rest/swagger#/Files/FilesV2_UploadFiles
 

shows an example using curl, here is a redacted version 

curl -X 'POST' \
  'mycaspio.caspio.com/rest/v2/files' \
  -H 'accept: application/json' \
  -H 'Content-Type: multipart/form-data' \
  -H 'Authorization: bearer myBearerHere' \
  -F 'File=@myfile2.pdf;type=application/pdf'

what i would do from here is attempt this in postman,
after that look into how to create an upload file button/input
likely it would go from local storage to caspio.

also, I am not sure id want to do this in a datapage, becasue your credentials would be very easily viewed. hope your storing your credentials in a server somewhere.

Link to comment
Share on other sites

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.

Guest
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.

Loading...
×
×
  • Create New...