Upload / Download files from OCI Storage in a Visual Builder app

OCI Object Storage is a versatile service which is very commonly used to store application data like images, files etc. In this blog, we discuss how to upload and download an object present in the OCI Object Storage from a Visual Builder app.

First we need to have a bucket that represents where we will be storing our objects.

Create a Bucket in OCI Storage

From the OCI Console, navigate to Storage → Buckets. Create a Bucket that you will be using for storage of files. For simplicity this Bucket is marked as Public, so that it doesnt require authentication, but you could achieve the same with Private visibility buckets as well.

Upload from VB

Below are the steps to implement the upload use case:

Setup a Service Connection to OCI Storage

We will use the PutObject OCI Storage API that is used for uploading objects to a bucket in the storage. The Content-Type header in this API is defaulted to  application/octet-stream, but it is a good practice to have it same as the standard MIME type format of the object, so that when you retrieve the object (via the GetObject API), you can get the same MIME format back.

Create a Service Connection to OCI Storage by using the endpoint flow with the following details:

 

Clicking on Create button will create the Service Connection as below

 

Create a webapp with a File picker

Create a webapp (called uploadstoragefile in my example), and on the page designer drag a File Picker component. In the properties tab of the File Picker component, use Selection mode = Single. Drag a button on the page and change the text to "Upload File".

 

Also create a page variable called selectedFile of type Any.  This will be used to store the file we select from the File Picker

 

Create an action chain to assign a variable to store the selectedFile

In the property inspector of the File Picker, click the events tab, select Selected File event and proceed to create an action chain attached to this event. Within the action chain, add Assign variables action from the palette and set the selectedFile variable to the action chain to input parameter variables.files[0] as shown

Create an action chain to upload the file from the file picker to service

In the property inspector of the "Upload File" button, click the events tab, select ojAction event and proceed to create an action chain attached to this event. Within the action chain, add Call REST action from the palette and set the following details on it:

 

 

 

 

 

Running/Debugging the application

Run the web app using the preview button. You should see the action run successfully and the file being created in your bucket. You can get a detailed view of what happens when you see the Developer Tools Network console and the JavaScript Console

 

If you scroll down in the Network console, you can also see the binary payload of the file

 

Now, let us complete the download use case for the file as well

Download from OCI Storage

Add the GetObject endpoint to the Service Connection

I am going to utilize the same Service Connection and add the GetObject endpoint to it. This reduces the number of service connections in your app, and is more effecient than creating a separate Service Connecction for each endpoint.

Since the PutObject and GetObject have the same path, I am going to select the path and click Add Endpoint. If they had different paths, I would have chosen the Add Endpoint on the top of the Service Connection.

 

Create the Endpoint with the following details:

Click Save to create the endpoint.

 

Create a webapp with a download button

Create another webapp (called downloadstoragefile in my case), and on the page designer drag a button and change the text to Download File

 

Create a JavaScript function to download the blob returned from OCI Storage

From the page designer, navigate to JavaScript and proceed to create a page module function as below:

PageModule.prototype.downloadFile = function (data, mimeType, filename) {

// responseBodyFormat = blob in RestAction ensures that data is a blob, so no need of further conversion
//const blob = new Blob([data], {

//type: mimeType

//});

const blob = data

// IE/Edge

if (window.navigator && window.navigator.msSaveOrOpenBlob) {

window.navigator.msSaveOrOpenBlob(blob);

return;

}

var link = document.createElement('a');

link.href = URL.createObjectURL(blob);

link.download = filename;

link.click();

// Firefox: delay revoking the ObjectURL

setTimeout(function() {

URL.revokeObjectURL(blob);

}, 100);

};

 

This function will be responsible for taking the binary data from the Rest call and converting into a JavaScript Blob which can be downloaded with a proper name

Create an action chain to download from OCI Storage

In the property inspector of the 'Download File' button, click the events tab, select ojAction event and proceed to create an action chain attached to this event. Within the action chain, add Call REST action from the palette and set the following details:

 

After the REST action, add the Call Function action to the chain with the following details

 

 

Run the app using the preview button and click on the download button. You can see more details from the developer tools JavaScript console and the Network console.

This completes the procedure on how to upload/download objects from OCI Object Storage service.  The same process can be used for other data sources whose REST APIs have application/octet-stream MIME type.  Also check out similar blogs on REST services in VB:

REST APIs with different formats

• Consuming REST APIs with multipart/form-data
• Consuming REST APIs with application/x-www-form-urlencoded payload

Other blogs in the VB – OCI Integration series

• Using OCI Signature authentication for services
• Connecting to Oracle Functions from Visual Builder
• Connecting to API GW from Visual Builder
• Connecting to API Gateway with IDCS authentication