Beginning with Canvas version 1.2.2, optional libraries will be included within assets folder but will need to be enabled before it can be used. This will involve:

• Adding the link to the JS/CSS file in the header
• Pushing the Angular module of the library into your application

Enable SheetJS

SheetJS a library that helps working with spreadsheets on the web! Check their website for more info. 

To enable the functionality in Canvas, do the following steps:

    1. Update WEB-INF/pages/header.library.ftl file with the following:

<script src="assets/js/optional/libs.opt.sheetjs.js"></script>

    2. Update WEB-INF/pages/header.script.init.ftl file by adding below line of code:

customAngularModules.push('angular-js-xlsx');

It is now enabled!

Create upload button

To check it out, create a simple Canvas Blank page with the following HTML line of code:

<js-xls onread="read" onerror="error"></js-xls>

And on the page’s corresponding controller:

$scope.read = function (workbook) {
      /* DO SOMETHING WITH workbook HERE */
      console.log(workbook);
};
    
$scope.error = function (e) {
      /* DO SOMETHING WHEN ERROR IS THROWN */
      console.log(e);
};

You should be able to see on your HTML page, something similar to:

Clicking the “Choose File”, will open up a Windows dialog to select an Excel file example to load. You will get the following response in the console showing the contents of the file:

That is it!