Oracle VBCS is a great tool that increase your productivity.

However, it has its constraints, since it’s contained within Oracle controlled environment, you don’t get all the component handler as you do when using JET.

Luckily, we do find tricks to go around the blocks when referring back to JET.

File upload function is a requirement for most applications, end users will get a plain text file from external systems or manually create them, and want to import it into the application directly through web UI.

But VBCS do not provide the option for importing files.

Following is how we can solve this issue.

First, we import the component “oj-file-picker” to the page configuration

"oj-file-picker": {
"path": "ojs/ojfilepicker"
}

Second, we add a file picker in the page and add a select listener to it through UI

<oj-file-picker id=”oj-file-picker–0001″ selection-mode=”single” on-oj-select=”[[$listeners.ojFilePicker0001OjSelect]]”></oj-file-picker>

Finally, and the most important part, we add following code to the system customize function, and hook it with the action chain created for the file picker select event

PageModule.prototype.selectListener = function (detail) {
var fileContent = PageModule.prototype.promiseUploadFile(detail).then(function(readerResult){
  console.log('filecontent in promise',readerResult);
  return readerResult;
  },function(){
	});    

  console.log('filecontent outside promise',fileContent);

  return fileContent;
};

PageModule.prototype.promiseUploadFile = function (detail){
return new Promise(function(resolve, reject){
  var files = detail.files;
  var file = files[0];
  var reader = new FileReader();
  reader.addEventListener("loadend",function(){
	resolve(reader.result);
  });

  reader.readAsText(file);
});
};

This way, we can get the select output from the function.

The function itself uses Promise, that’s why it contains 2 parts. When calling from action chain, you need to use function “selectListener” to get the selected file return.