Informational post: How to browse and read files in an Iris responsive web type of application

HCL Volt MX Volt MX Tips
,
1

Hello All,

Please find the below code snippet with two functions to achieve the functionality of browsing and reading the files from an Iris responsive web application.

With these two functions in a form controller of a form in Iris responsive web application, you can browse and read a file, and have the file in base64 format in one of the form controller’s variable (gblBrowsedFileBase64).

define({ 

  gblBrowsedFileBase64: null,

  browseFiles : function() {
    voltmx.print("Entering into browseFiles");
    var config = {
      selectMultipleFiles: false,        
      filter: ["image/png", "image/jpeg", "application/pdf"]
    };
    voltmx.io.FileSystem.browse(config, this.browseFilesCallback.bind(this));    
    voltmx.print("Exiting out of browseFiles");
  },

  browseFilesCallback : function(event, FileList) {
    voltmx.print("Entering into browseFilesCallback");
    voltmx.print(JSON.stringify(event)+"-----------"+JSON.stringify(FileList));
    var thisFormControllerReference = this;

    if(!window.File || !window.FileReader || !window.FileList){  // proceed only if file apis are supported.
      voltmx.print("2103, Cannot open media gallery. Not supported."); //error code mentioned in documentation
      return;
    }

    var reader = new FileReader(); 
    reader.onload = function(evt) { // upon successful file read
      var chars  = new Uint8Array(evt.target.result);
      var CHUNK_SIZE = 0x8000, index = 0, result = '', slice;
      while (index < chars.length) {
        slice = chars.subarray(index, Math.min(index + CHUNK_SIZE, chars.length)); 
        result += String.fromCharCode.apply(null, slice);
        index += CHUNK_SIZE;
      }
      onFileLoadCallback(result); // call callback with final file binary string
    };

    reader.onerror = function(evt) {  // error handler
      if(evt.target.error instanceof FileError){  // Read error code in case of error is of FileError type
        switch(evt.target.error.code){
          case FileError.NOT_FOUND_ERR: voltmx.print("The file resource couldn't be found at the time the read was processed."); 
            break;
          case FileError.NOT_READABLE_ERR: voltmx.print("2101, The resource couldn't be read. Insufficient Permissions."); 
            break;
          case FileError.ENCODING_ERR: voltmx.print("The resource couldn't be encoded."); 
            break;
          case FileError.SECURITY_ERR: 
          default: voltmx.print("The file resource is unsafe/changed/other unspecified security error.");
        }
      }else  // read error name & message in case error is of DomError type
        voltmx.print(""+evt.target.error.name+", "+evt.target.error.message);
    };

    reader.readAsArrayBuffer(event.target.files[0]);

    voltmx.print("Exiting out of browseFilesCallback");

    function onFileLoadCallback(rawdata) {
      voltmx.print("Entering into onFileLoadCallback");
      var base64 = window.btoa(rawdata);
      voltmx.print("base64: "+base64);
      thisFormControllerReference.gblBrowsedFileBase64 = base64;
      voltmx.print("Exiting out of onFileLoadCallback");
    } 

  }
});

Thank you,
Venkata Raju Bankapalli

1 Like