This article demonstrates how to restrict the file size of a document uploaded using the file picker in Oracle Visual Builder.

How we are going to make it happen:

We will make 3 variables, the first one is Docs which is an array variable, the second one is LargeFileDocArray which is again an array variable and the third one is ErrorMessage which is a string variable.

When we upload a document through the file picker, we will check if the size of the file is greater than 8MB then we will push that file to the LargeFileDocArray array and show an error message through the ErrorMessage variable that “The uploaded files are too big. The maximum allowed size is 8MB per file.” and if the size of the uploaded file is less than 8MB we will push that file to Docs array and show the name of uploaded files in our main page.

The following are the steps:

Create a VB application and a web application under the VB application using the Web application navigator.
Create 3 variables with the following properties:

1. An array variable Docs of type FileType with the following items:
  - FileName (String)
  - FileRef (Any)
  - FileUploaded (Boolean)
  - Size (Number)
2. An array variable LargeSizeDocArray of string type
3. A string variable ErrorMessage

Go to the main start page, drag and drop the file picker component from the Components pallet to the design area, as shown in the image below.
Now go to Events in the Properties panel and click on + Event Listener to create an action chain to the file picker that will trigger whenever you upload some documents through it. Then click on the Selected Files option. This will create the FilePickerSelectChain action chain and open the action chain canvas.
- Go to the Actions pallet, drag and drop the Reset Variables action to the canvas, and under the Variable to Reset field in the Properties panel, select LargeFileDocArray and ErrorMessage to reset. This action will reset the respective error handling variables whenever you again click on the file picker to upload documents.

- Then drag and drop For Each action below Reset Variable action and under []items parameter in the Properties panel, select action chain variable files.

Click on Code (on the top right of the canvas) and write the below highlighted JS if-else condition to the action chain code. This if block condition will check that uploaded files must not be greater than 8 MB and if any file is greater, then it will store the names of those files in the LargeFilesDocArray variable.

if (files[index].size > 8*1024*1024) { // size you can customized as per the requirement

          $variables.LargeFilesDocArray.push(files[index].name);

        }

        else{

          $variables.Docs.push({

            FileName: files[index].name,

            FileRef: files[index],

            FileUploaded: false,

          });

        }

- Then, drag and drop the Call function action below For Each action, under the Function Name field in the Properties panel, select the arrayToString() function and pass the variable LargeFilesDocArray in the array Parameter as an argument of the function. This arrayToString() function will convert the names of all the files stored in the LargeFilesDocArray into a string and return that string as output.
- Copy and paste the arrayToString function under class PageModule{ }in the JavaScript section of the main page.
```
arrayToString(array) {

      let result = "";

      result = array.join(", ");

      if(array.length>0){

         result = "The uploaded files ("+result+") are too big. The maximum allowed size is 8MB per file.";

      }

      return result;

    }
```

- Then, drag and drop the Assign Variable action below the Call Function action. Under the Variable field in the Properties panel, select ErrorMessage and assign the output of the arrayToString function to the variable ErrorMessage under the Value field in the Properties panel. Now the ErrorMessage variable has the names of all the files that are of sizes greater than 8 MB.

Now click on Page Designer, search Text under Components pallet, and drag Text under the oj-file-picker component.

Click on the oj-bind-text and under the Value field in the Properties panel, bind the variable ErrorMessage to the Value field under the Properties panel.
Now on the left bottom of canvas, click on Structure and find Bind Text. Right-click on Bind Text and under Surround select If, your oj-bind-text component start surrounding with an oj-bind-if tag.

Click on the oj-bind-if tag and under the Test field in the Properties panel, click on fx. An Expression Editor will open and under that write the below-formatted condition and click on Save. What this Test condition will do is that if there is any file present in the LargeFilesDocArray that has a size greater than 8 MB, the oj-bind-text tag associated with the ErrorMessage variable will render under the file picker showing an error message. Otherwise, the oj-bind-text tag associated with ErrorMessage will not render under the file picker.

     $variables.LargeFileDocArray.length>0

Now select For Each action from the Components panel, drag and drop For Each component under the error message text component, and bind the For Each component with the Docs variable (you can bind For Each with the Docs variable by clicking on the Data field in Properties panel).
Under For Each component, create a <template></template> Under that template tag create <span class=”oj-badge oj-badge-info”></span>. Under the span tag, drag and drop the Text component and bind its value with $current.data.FileName. This step will render the names of all the files that are not greater than 8 MB in size.

Now go to the Page Designer tab and try uploading multiple files in which at least one of the files should be of a size greater than 8MB and when you click on upload, it will show you an error that “The uploaded files (IMG_7731.MOV) are too big. The maximum allowed size is 8MB per file.”

Also, test with files less than 8MB. The file name will be visible right after the file picker.

If you liked the article, please like, comment, and share.

Please look at my YouTube channel for Oracle Integration-related videos and don’t forget to subscribe to our channel to get regular updates.

Enter your keyword

post

Enter your keyword

post

Restrict File Size in Oracle Visual Builder