Scroll to top

How To Upload a File In VBCS Using File Picker


Shobhit Taliyan - December 5, 2022 - 2 comments - 512 Views

Reading Time: 7 minutes

In this blog, we will illustrate how you can upload a file in VBCS using File Picker. This is a detailed blog with concise screenshots for better understanding of the topic. So, let’s start.

Step 1: Click on the components and search for the file picker component.

s1Step 2: Drag and drop the file picker component inside the VBCS page.

s2Step 3:Go to properties and select the On option from the drop-down menu.

Step 4: Select ‘click and drop’ option.

s3

Step 5: Create a new variable of array type that will hold the information regarding the file format that you want to upload.

s5Step 6: Inside properties, in the Array item type, select the string.

s6Step 7:Then, inside the properties, in the default value, give the mime type for the file that you want to upload. For example, in the example we’re taking here for a csv file, the mime type will be “text/csv.”

s7Step 8: Then go to the page designer, inside the properties of file picker in Accept part and click on expression editor.

s8Step 9: Drag and drop the “uploadFileFormat” variable and click on the “Save” button. This variable will hold information regarding the type of file that you want to upload.

s9Step 10:Inside the properties of file picker, go the events part.

Related article: How To Extend The 5GB Limitation Of Oracle VBCS Business Objects?

Step 11: Click on new event then on new custom event.

s11Step 12: Search for ‘ojBeforeSelect’ and click on the select button to select the event.

s12Step 13: Give Action chain name and click on new action chain.

s13Step 14: Click on “Javascript” and create a function that will check for the size of the uploaded file, and if the file size is more than 10 MB, it will return severity as an error and also the error message.

PageModule.prototype.beforeSelectListener = function (detail) {

    var accept = detail.accept;

    var files = detail.files;

    var messages = [];

    var file;

    var invalidFiles=[];

    for (var i =0; i <files.length; i++){

      file = files[i];

      if (file.size > 10000000) {

        invalidFiles.push(file.name);

      }

 

    }

    if(invalidFiles.length===0){

      accept(Promise.resolve());

      return null;

    }else{

      if(invalidFiles.length === 1){

        messages.push({

          severity:”error”,

          summary:”File” + invalidFiles[0] + ‘ is too big. The maximum allowed size is 10MB.’

        })

      }else{

        var fileNames = invalidFiles.join(‘, ‘);

        messages.push({

          severity: ‘error’,

          summary: “These files are too big: ” + fileNames + ‘. The maximum allowed size is 10MB.’

        })

      }

      return messages;

    }

   

  };

Step 15: Then go to the action chain again from the actions and drag and drop the call function action.

Step 16: Inside properties in function name, choose the ‘beforeSelectListener’ function.

s16Step 17: Go to the page designer inside the properties, click on events and then create an input parameter let’s say detail of any type.

s17Step 18:Inside the detail, click on the expression editor, drag and drop the detail, and then click on save.

s18Step 19: Go to the ‘FilePickerBeforeSelectChain’ action chain and click on call function action.

Step 20: In properties, click on detail.

s20Step 21:Map the action chain variable detail to parameter detail, and then click on save.

s21Step 22:From the actions section, drag and drop the if logic.

s22Step 23:In the properties of If logic, click on the expression editor for the condition section.

Step 24: Drag and drop the result of ‘callFunctionBeforeSelectListener’ function from the action chain result and click on save.

s24Step 25: Create one variable ‘fileinvalidMessage’ that will contain the message if the file is invalid.

Step 26: Go back to the action chain and assign variable ‘fileinvalidMessage’ to the result of ‘beforeSelectListener’ function.

s26Step 27: Click on page designer and create one more new custom event.

Step 28:Choose ojSelect and click Save.

s28Step 29:Create an action chain, give it any name, and click on new action chain.

s29Step 30: Click on ‘Javascript’ and create a function ‘selectListener’ that will accept the file details and return the name of the file.

PageModule.prototype.selectListener = function(detail){

    var files = detail.files;

    return (Array.prototype.map.call(files, function (file){

      return file.name;

    }));

  };

Step 31: Drag and drop the “Call Function” Action.

Step 32: In the properties of Call Function, select the function name as ‘selectListener’.

s32Step 33: Go to the Page designer and create one input variable for ‘FilePickerSelectChain’ Action Chain with id as detail.

Step 34: Assign this detail parameter with event details.

Step 35: Go back to the ‘FilePickerSelectChain’ action chain and click on assign input parameter of the function.

Step 36: Map the detail parameter with the detail variable and click on save.

s36Step 37: Create a variable as filename.

Step 38: Go back to the action chain and drag and drop the ‘AssignVariable’ action.

s38Step 39: In the properties of Assign Variables, click on assign.

Step 40: Map the filename with the result of ‘selectListener’ function and click on save.

s40Step 41: Drag and drop the if condition and in the expression editor of if condition, check for the filename and invalidFileMessage variable.

s41Step 42:In the false part of the if condition, drag and drop the return action.

s42Step 43: Click on the ‘Javascript’ and create one function ‘filesArray’ that will return the files.

PageModule.prototype.filesArray = function(files){

    var newArray = [];

    for(var i=0; i<files.length; i++){

      newArray.push(files[i]);

    }

    return newArray[0];

  };

Step 44: Go back to the action chain and in the true part of the if condition, drag and drop the Call Function action and select the function as ‘filesArray’.

Step 45: Map the input parameter of ‘filesArray’ function with the file in details of variable and click on save.

s45Step 46: Click on the ‘Javascript’ and create one function ‘fileReadMulti’ that will take file data and ‘fileId’ as input and return the file with name, content, filetype, size.

PageModule.prototype.fileReadMulti = function(file, filId){

 

    return new Promise(function(resolve, reject){

      var reader = new FileReader();

      reader.readAsDataURL(file);

 

      reader.onloadend = function(onloadend_e){

        resolve({

          “FILE_ID” : filId,

          “FILE_NAME”:file.name,

          “FILE_TYPE” : file.type,

          “FILE_SIZE” : file.size,

          “CONTENT” : reader.result.split(‘,’)[1]

        });

      };

 

      reader.onerror = function(err){

        reject(err);

      };

    });

  };

Step 47: Go back to the action chain and drag and drop “Call Function” action and select the function as ‘fileReadMulti’.

s47Step 48: Map the input parameters of the function file and ‘fileId’.

Step 49: Give ‘fileId’ as 1.

Step 50: Map the file with the response of the ‘filesArray’ function and click on save.

s50Step 51: Create a variable as a file of object type having field as FILE_ID,FILE_NAME,FILE_TYPE,FILE_SIZE,CONTENT.

Step 52: Go back to the action chain and drag and drop Assign Variable action and assign file variable with the result of the function ‘fileReadMulti’ with the file variable.

s52Step 53: Now, if we click on preview and select one file then we will be able to see the file details in the file variable and we can use that according to our need.

Step 54: We’ve uploaded one file and we can see the details of the file from inspect in browser.

s54

We hope that by following the above steps, you can successfully upload a file in VBCS using File Picker. Please let us know your thoughts about this blog in the comments below, or get in touch with us at [email protected].

Shobhit Taliyan

Shobhit Taliyan is a graduate of Computer science and Engineering. He has a professional certification in Java full-stack development. He is working as an Oracle consultant at Conneqtion Group. Shobhit has good knowledge of OCI, OIC, VBCS,PL/SQL and Oracle Fusion.

Author avatar

Shobhit Taliyan

https://conneqtiongroup.com
Shobhit Taliyan is a graduate of Computer science and Engineering. He has a professional certification in Java full-stack development. He is working as an Oracle consultant at Conneqtion Group. Shobhit has good knowledge of OCI, OIC, VBCS,PL/SQL and Oracle Fusion.

Related posts

2 comments

  1. […] In the previous blog we discussed about how to upload and download attachments in VBCS and also how to implement OJ-FILE-PICKER in your VBCS application. For more details, you can check out the blog – Uploading a file in VBCS using file picker. […]

  2. […] In the previous blog we discussed about how to upload and download attachments in VBCS and also how to implement OJ-FILE-PICKER in your VBCS application. For more details, you can check out the blog – Uploading a file in VBCS using file picker. […]

Post a Comment

Your email address will not be published. Required fields are marked *