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.