Base64 Encode and upload file to UCM from VBCS

In this article let us see an approach to upload the file selected by the user to UCM using VBCS. We will be using the REST service direct from VBCS without any OIC wrapper. While most of the steps mentioned here are simple the places where it gets tricky is when the chosen file needs to be converted to base64 encoded format. So let us see the steps in detail.

Service connection to erpintegrations REST service

I guess anyone working in VBCS would know the steps to create a service connection. Hence we will not be detailing more on that. Just some required information below,

• REST API documentation here

• Method : POST

• Sample Payload :

  {
    "OperationName": "uploadFileToUCM",
    "DocumentContent": "UEsDBBQAAAAIABCInEgIHJSKCgAAAAgAAAAIAAAAdGVzdC50eHRzTEpWCEktLgEAUEsBAh8AFAAAAAgAEIicSAgclIoKAAAACAAAAAgAJAAAAAAAAAAgAAAAAAAAAHRlc3QudHh0CgAgAAAAAAABABgAW4FRYEGh0QEBIE9gQaHRAckeCWBBodEBUEsFBgAAAAABAAEAWgAAADAAAAAAAA==",
    "DocumentAccount": "fin$/payables$/import$",
    "ContentType": "application/x-zip-compressed",
    "FileName": "Test.zip"
  }
  

UI to choose the file and Upload

Lets create a basic UI with one oj-file-picker to pick the file and a oj-button to trigger the integration. You can download the sample application with the code mentioned at the end of the article.

Action chain for Selection of a File

• Just store the file selected into a variable.

Action chain for Upload button click

• Get the base64 encoded string of the file

getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result.split(',').pop());
        reader.onerror = error => reject(error);
      });
    }

• Prepare the payload. This can either be done using a JS or direct in action chain mapper.

preparePayload(FileName, ContentType, DocumentAccount, base64Content) {

      let obj = {};
      obj.OperationName = 'uploadFileToUCM';
      obj.DocumentContent = base64Content;
      obj.DocumentAccount = DocumentAccount;
      obj.ContentType = ContentType;
      obj.FileName = FileName;

      return obj;
    }

• Call the API to upload

Sample code

• The sample code (uploadToUcm-1.0) is hosted in my GIT here. Just download the ZIP and import it.

• Update the Service connection URL and credentials for your instance.