Uploading files from Oracle APEX to OCM and previewing in APEX

Photo by Paula Vermeulen on Unsplash

Overview

Oracle Content Management (OCM) is a market-leading, cloud native platform that manages all your enterprise documents. Oracle APEX is an enterprise low-code development platform that is used to develop and deploy web applications on Oracle databases. In this post, you’ll learn how to use OCM REST APIs to upload files to OCM and then preview them in an APEX page.

Prerequisites:

An APEX application with SSO that shares the same Oracle access manager domain as OCM.

Uploading files to OCM

The Setup

Step 1: Add the required OCM javascript file to APEX

On your APEX application, go to Shared Components -> User Interfaces -> Javascript and add the below file URL

https://static.ocecdn.oraclecloud.com/cdn/cec/api/oracle-ce-ui-2.12.js

Step 2: Create an Application Item in APEX called OCM_URL. Create an Application Computation for this application item with computation point ‘Before Header’. Add the OCM URL as a Static Assignment.

Step 3: Uploading files to OCM

Create a hidden page item P4_OCM_URL on your APEX file upload page and add the default value as the Application item you just created.

On the same page, add the below code to execute when the page loads

OracleCEUI.oceUrl = $v(P4_OCM_URL);
OracleCEUI.ssoInit();

Create a javascript function to upload the files to OCM

function uploadFile(folderID, filecontent,filename) {
     
      var xhr = new XMLHttpRequest();
      console.log("XHR initialized.");
      return new Promise(function (resolve, reject) {
        xhr.onreadystatechange = function () {
          console.log("readyState:" + this.readyState);
          console.log("Status" + this.status);
        };
 
        xhr.onload = function () {
          if (xhr.status != 201 && xhr.status != 200) { // analyze HTTP status of the response
            console.log(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
            resolve(xhr.responseText);
             //First clear the errors
    apex.message.clearErrors();

    // Now show new error
    apex.message.showErrors([
        {
            type:       "error",
            location:   [ "page" ],
            message:    "Error uploading file",
            unsafe:     false
        }]);    
          } else { // show the result
            console.log(`Done, got ${xhr.response.length} bytes`);
            apex.message.showPageSuccess('File Uploaded!');
            resolve(xhr.responseText);
          }
          uploadfileStatusCode = xhr.status;
        };
 
        xhr.onprogress = function (event) {
          if (event.lengthComputable) {
            console.log(`Received ${event.loaded} of ${event.total} bytes`);
 
          } else {
            console.log(`Received ${event.loaded} bytes`); // no Content-Length
 
          }
          return xhr.status;
        };
 
        xhr.onerror = function () {
          console.log("Request failed");
        };
        xhr.open("POST", OracleCEUI.oceUrl + "/documents/api/1.2/files/data", true);
 
        var data = JSON.stringify({
          parentID: `${folderID}`,
        });
        let formdata = new FormData();
        formdata.append('jsonInputParameters', data);
        formdata.append('primaryFile', filecontent, filename);
        xhr.setRequestHeader("Authorization", "Session");
        xhr.setRequestHeader("Accept", "*/*");
 
        xhr.addEventListener("readystatechange", function () {
          if (this.readyState === 4) {
            //  console.log(this.responseText);
             var resp = JSON.parse(this.responseText);
        console.log(resp.id);
          }
        });
        xhr.withCredentials = true;
        xhr.send(formdata);
      });
}

Create a new page item of input type ‘File Browse’ with name ‘P4_FILE’.

Create a Submit button. Add a dynamic action on click of Submit and call the above the javascript function.

uploadFile(FOLDERID,document.getElementById('P4_FILE').files[0],document.getElementById('P4_FILE').files[0].name);

Reset the ‘P4_FILE’ page item.

Preview the uploaded files in APEX

The below steps will open the file preview in a modal popup on click of a button on the main page.

Create a new APEX page of type ‘Modal Dialog.

Create a hidden page item P6_OCM_URL on this page and add the default value as the Application item ‘OCM_URL’ you created.

Create another hidden page item P6_FILEID which will store the file ID.

Create a new region with Static ID ‘ocmframe’.

Now add the below code to execute when page loads

OracleCEUI.oceUrl = $v(P6_OCM_URL);
OracleCEUI.ssoInit();
OracleCEUI.ssoInit().then(function() {
   console.log("sso initialized");
var options = {
  documentViewer: {
     id: $v(P6_FILEID),
   header : {
      hide: true 
   },
   breadcrumb:{
hide: true
   }
  }
}

var frameElement = OracleCEUI.documentViewer.createFrame(options);
document.getElementById("ocmframe").appendChild(frameElement);

});

On the main page, create a button with action ‘Redirect to a page in this application’ and link it to the modal page you just created. Pass the file id as the parameter by setting the item ‘P6_OCM_URL’ you created.

You can customize the look and feel of the preview page using the documentViewer component.

https://docs.oracle.com/en/cloud/paas/content-cloud/embed-ui-api/index.html#documentviewer