In this article let us see how to zip the files and use its contents downstream.

The sample application is present in my GIT here.

One of the use case for this functionality is where the user can upload a data file and we need to generate a FBDI zip from within VBCS and import into SaaS.

Import the Library

We will be using the library jszip in order to accomplish this. If you want to pick the library from CDN then feel free. Check my previous posts on how to import and use the library into VBCS.

But in this post we will be using a local copy of the library.

• Download the library from here and save as jszip.min.js

• Import that into the VBCS app under the resources/js folder

Use it in the application

So far, we have only imported the library into our app. Now we will load and use it. In our page module define function, we need to make an entry for the library like this,

define(['resources/js/jszip.min'], (jszip) => {......

Note, if you are using it direct from CDN then instead of referring it from resources/js you would be using the alias given in your requirejs block.

Let us assume the UI has a File picker using which the user has chosen a file.

We will keep that file , add another PROPERTIES file and zip it together and download it. This is just one use case.

Of course instead of downloading, the same file can be sent as a payload for ImportBulkData operation REST service. API details here. Check Example 1: ImportBulkData Operation

But coming back to zip and download, The complete JS for the page is as shown below,

define(['resources/js/jszip.min'], (jszip) => {
  'use strict';

  class PageModule {

    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result.split(',').pop());
        reader.onerror = error => reject(error);
      });
    }

    preview(blobData, contentType) {
      if (contentType === undefined || contentType.length === 0) {
        contentType = "application/octet-stream";
      }
      var newBlob = new Blob([blobData], {
        type: contentType
      });
      return URL.createObjectURL(newBlob);
    };

    zip(FileUpload, DocumentAccount, base64Content) {
      const zip = new jszip();
      zip.file("GlDailyRatesInterface.PROPERTIES", "/oracle/apps/ess/financials/generalLedger/programs/common,DailyRatesImport,GlDailyRatesInterface");
      //const img = zip.folder("images");
      zip.file("GlDailyRatesInterface.csv", base64Content, { base64: true });
      zip.generateAsync({ type: "blob" }).then(function (content) {
        let element = document.createElement('a');
        let date = new Date().toJSON().slice(0,10).replace(/-/g,'_');
        element.setAttribute('href', PageModule.prototype.preview(content, ''));
        element.setAttribute('download', "GlDailyRatesInterface_"+date+".zip");
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      });
    }
  }

  return PageModule;
});

PS: The sample application is present in my GIT here.