Integration

Get Involved. Join the Conversation.

Topic

    Ankur Jain
    Not able to call REST API from VBCS which accepts attachment...Answered
    Topic posted August 9, 2019 by Ankur JainBronze Trophy: 5,000+ Points, tagged REST 
    85 Views, 19 Comments
    Title:
    Not able to call REST API from VBCS which accepts attachment in request
    Content:

    Hi Experts,

    I have created one REST API in Integration Cloud which takes attachment and payload in request body due to which request header type is multipart/mixed. This API is working fine from POSTMAN.

    Would like to call the REST API from VBCS page. This VBCS page should have one text box, file uploader and button. On button click, I would like to call the REST API.

    Can you guys help me to achieve this.

    Regards,

    Ankur

    Best Comment

    Kanchankumar Khedkar

    Seems like you were able to invoke OIC REST API. However, there was error while processing it in OIC. Can you please check OIC instance what error was it?

     

    Comment

     

      • Ankur Jain

        Hi Kanchan,

        My REST API type accepts a attachment and json body. The Request Media type is multipart/mixed. When I create a Service Connection in VBCS, and then use put the Media Type as multipart/mixed, the body section got freezed(attaching screen shot). While doing testing of the Service Connection it gets failed and throws an error javax.mail.MessagingException: Missing start boundary​

        Could you please help me in building end to end example and see if this is possible in VBCS.

         
         
    • Kanchankumar Khedkar

      That is fine. 

      You will have to create input using JS. 

      e.g.

      PageModule.prototype.formdata = function(uploadfile, input1,input2){
            var formData = new FormData();
            formData.append('file', uploadfile, uploadfile.name);
            formData.append('json', JSON.stringify({   "FileUploadRequest": {"Field1": input1,    "Field2": input2} }));
            return formData;
          };

      Invoke this on Select button. 

      after that you In Invoke Rest you can you can map the output of JS to body . 

      Thank you.

      Regards,

      Kanchan

      • Ankur Jain

        Hi,

        I tried the same but it say's "Cannot read property 'name' of undefined". See the attached screen shot

        • Ankur Jain

          I was not passing the values in JS function. Now value has been passed and getting different error.

          Below is the JS function looks like:

          define([], function() {
            'use strict';

            var PageModule = function PageModule() {};
            PageModule.prototype.formdata = function(fileSet,firstname){
              console.log("file "+fileSet+" name "+fileSet.name+" first name "+firstname);
                var formData = new FormData();
                formData.append('file', fileSet,fileSet.name);
                formData.append('json', JSON.stringify({   "FileUploadRequest": {"name": firstname} }));
                return formData;
              };

            return PageModule;
          });

          See the screen shot

          • Kanchankumar Khedkar

            I don't think, you can pass use   formData.append('file', fileSet,fileSet.name); please try using formData.append('file', fileSet)

             

            • Ankur Jain

              am passing $chain.variables.detail.files in "fileSet" parameter of below function 

              PageModule.prototype.formdata = function(fileSet,firstname){
                  var csvFile = fileSet[0];
                  console.log("file---------------------------------- "+fileSet+" name "+fileSet.length+" first name "+firstname+"csvFile.type "+csvFile.type);
                    var formData = new FormData();
                    formData.append('file', csvFile);
                    formData.append('json', JSON.stringify({ "FileUploadRequest": {"name": firstname} }));
                    return formData;
                  };

              Getting below error:

              log.js:312 [VB 7:35:23 AM (ERROR), /vb/stateManagement/page]: TypeError: Cannot read property 'files' of undefined
                  at eval (eval at createFromString (expression.js:69), <anonymous>:3:408)
                  at Function.evaluateImmediate_CallReadThenEndDependencyDetection (oj3rdpartybundle.js:2188)
                  at Function.evaluateImmediate_CallReadWithDependencyDetection (oj3rdpartybundle.js:2155)
                  at Function.evaluateImmediate (oj3rdpartybundle.js:2116)
                  at Function.beforeSubscriptionAdd (oj3rdpartybundle.js:2265)
                  at Function.subscribe (oj3rdpartybundle.js:1313)
                  at Function.subscribeToDependency (oj3rdpartybundle.js:2067)
                  at Object.computedBeginDependencyDetectionCallback (oj3rdpartybundle.js:2003)
                  at Object.registerDependency (oj3rdpartybundle.js:1478)
                  at computedObservable (oj3rdpartybundle.js:1914)

              error.PNG (78KB)
              • Kanchankumar Khedkar

                When you are invoking this action chain? On Select or on Upload file button click? I have used it on Select event on file picker. I believe you are using it on Upload button.

                Secondly, i used value use $chain.variables.detail.files[0]

                Plus i am not sure but even though you JS function has two parameter, it is showing one 1 parameter in your screenshot.  

                • Ankur Jain

                  We are invoking below JS function in action chain on "ojSelect" event of "File Picker". And now we are able to get file name and fileSet size in JS module, but getting 500 error on invocation of OIC rest service. Attaching screen shot for your refrence

                  define([], function() {
                    'use strict';

                    var PageModule = function PageModule() {};
                    PageModule.prototype.formdata = function(fileSet,firstname){
                      var csvFile = fileSet[0];
                      console.log("file---------------------------------- "+fileSet+" name "+fileSet.length+" first name "+firstname+"csvFile.type "+csvFile.type);
                        var formData = new FormData();
                        formData.append('file', csvFile);
                        formData.append('json', JSON.stringify({ "FileUploadRequest": {"name": firstname} }));
                        return formData;
                      };

                    return PageModule;
                  });

                  • Kanchankumar Khedkar

                    Seems like you were able to invoke OIC REST API. However, there was error while processing it in OIC. Can you please check OIC instance what error was it?

                     

                    • Ankur Jain

                      Yes, now we are getting trigger on OIC rest service. but its fail at OIC level when we invoke this service via VBCS and its working fine via SOAP UI. And when we it is fail at OIC level then we can not open failed intance to check exact error.

                       

                      • Hemanth Lakkaraju

                        This tells me the message to OIC is rejected. Go to Monitoring --> Errors --> and then click on Error icon to see what is the exact error message.

                    • Ankur Jain

                      Hi Kanchan,

                      Is there any possibility to connect over webex for few minutes to resolve it if you don't mind or if you have working example with our matching requirement, please share the VBCS application.

                       

                      • Kanchankumar Khedkar

                        Hello Ankur, 

                        PFA a sample application I developed. It has two file VBCS application + OIC File as well. 

                        I think, problem might be that there attachment reading stage in REST where you file might not be as per the the schema you have have used hence it might be failing my guess. 

                        Thank you. 

                        Regards,

                        Kanchan

                        • Ankur Jain

                          Hi Kanchan,

                          Now we are able to call OIC rest API with file on "ojSelect" event of File Picker.

                          But our requirement is to upload file on "Submit" button event. Could you help us to achieve this.

                          • Kanchankumar Khedkar

                            Hello Ankur, 

                            we can try below:

                            1. Create a page variable say formData- of anyType.

                            2. On ojSelect event action call previously written JS script and assign the output here. (in addition  you can put the value to another variable say file name and put in text box to display which name of file selected. 

                            3. On Upload button call the REST API and there map formdata page variable to input to rest api variable.

                            thank you. 

                            • Kanchankumar Khedkar

                              Here is what worked for me

                              1. Created PageVariable named details 

                              2. on OjSelect event action - assign input details on chain to pageVariable details. 

                              3. On upload button action - called js passing page variable details. Then assigned out of JS function to GET REST API. 

                               

                               

                            • Kanchankumar Khedkar

                              Here is what worked for me

                              1. Created PageVariable named details 

                              2. on OjSelect event action - assign input details on chain to pageVariable details. 

                              3. On upload button action - called js passing page variable details. Then assigned out of JS function to GET REST API. 

                               

                               

    • Hemanth Lakkaraju

      The rest api should be created with multipart/fom-data

    • Kunal Sonje

      Hi Ankur,

      You can also check an option to send file content in base64 format to OIC REST API.

      Basically, on click of Submit button, using script convert content into base64 format and invoke OIC API.

      Thanks,

      Kunal