How to upload Excel Sheet to SAP UI5 Application?

[shreyashrangrej]

Hay experts I'm working on an object to upload excel sheet (.csv) in SAP UI5 application. I Took reference form Anubhav Oberoy Tutorial (https://youtu.be/F1S0LOAkTak). I Followed the part of code where he created excel upload object. But I'm stuck with this one error. Please inspect my error and let me know if I'm missing some part of code! Thank You!

#App.View.xml


<mvc:View controllerName="empTableImport.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	xmlns:unf="sap.ui.unified" displayBlock="true" xmlns="sap.m">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<Panel headerText="Demo for Excel Upload">
						<Table id="idEmployee" width="auto" class="sapUiResponsiveMargin" noDataText="Currently No data Available" growing="true"
							items="{objectView>/data}" growingScrollToLoad="true">
							<headerToolbar>
								<Toolbar>
									<Title id="idTopTitle" text="Employee Data"/>
									<ToolbarSpacer/>
									<Button icon="sap-icon://add" press="onAddExcelData"></Button>
									<Button icon="sap-icon://download" press="onDataExport"/>
									<Button icon="sap-icon://download" text="XLS" press="onDataExportXLS"/>
								</Toolbar>
							</headerToolbar>
							<columns>
								<Column id="idEmployeeId">
									<Text text="Employee ID"/>
								</Column>
								<Column id="idPaymentDate">
									<Text text="Payment Date"/>
								</Column>
								<Column id="idNumber">
									<Text text="Number"/>
								</Column>
								<Column id="idAmount">
									<Text text="Amount"/>
								</Column>
								<Column id="idRecordId">
									<Text text="Record ID"/>
								</Column>
								<Column id="idWageType">
									<Text text="Wage Type"/>
								</Column>
								<Column id="idCheckBox">
									<Text text="Check Box"/>
								</Column>
							</columns>
							<items>
								<ColumnListItem type="Navigation" press="onPress">
									<cells>
										<Text text="{objectView>Employee ID}"></Text>
										<Text text="{objectView>Payment Date}"></Text>
										<Text text="{objectView>Number}"></Text>
										<Text text="{objectView>Amount}"></Text>
										<Text text="{objectView>Record ID}"></Text>
										<Text text="{objectView>Wage Type}"></Text>
										<Text text="{objectView>Check Box}"></Text>
									</cells>
								</ColumnListItem>
							</items>
						</Table>
					</Panel>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

#App.controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel",
	"sap/ui/unified/FileUploader",
	"sap/m/Dialog"
], function(Controller, JSONModel, FileUploader, Dialog) {
	"use strict";

	return Controller.extend("empTableImport.controller.App", {

		onInit: function() {

			var iOriginalBusyDelay, oViewModel = new JSONModel({
				busy: true,
				delay: 0,
				data: []
			});
			this.setModel(oViewModel, "objectView");
		},
		
		onAddExcelData: function() {
			//This code was generated by the layout editor.
			var that = this;
			//Step 1: Create a popup object as a global variable
			if (this.fixedDialog === undefined) {
				this.fixedDialog = new Dialog({
					title: "Choose CSV File For Upload",
					beginButton: new sap.m.Button({
						text: "Upload",
						press: function(oEvent) {
							// TO DO: get the object of our video player which live camera stream is running
							//take the image object out of it and set to main page using global variable

							that.fixedDialog.close();
						}
					}),
					content: [
						new FileUploader("excelUploader")
					],
					endButton: new sap.m.Button({
						text: "Cancel",
						press: function() {
							that.fixedDialog.close();
						}
					})
				});

				this.getView().addDependent(this.fixedDialog);
				this.fixedDialog.attachBeforeClose(this.setDataToJsonFromExcel, this);
			}

			//Step 2: Launch the popup
			this.fixedDialog.open();
		},
		
		setDataToJsonFromExcel: function(oEvent) {
			var oUploader = oEvent.getSource().getContent()[0];
			var domRef = oUploader.getFocusDomRef();
			if (domRef.files.length === 0) {
				return;
			}
			var file = domRef.files[0];
			var that = this;
			this.fileName = file.name;
			this.fileType = file.type;
			var reader = new FileReader();
			reader.onload = function(e) {
				//get an access to the content of the file
				debugger;
				var arrCSV = e.currentTarget.result.match(/[\w .]+(?=,?)/g);
				var noOfCol = 6;
				var headerRow = arrCSV.splice(0, noOfCol);
				var data = [];
				while (arrCSV.length > 0) {
					var record = {};
					var excelData = arrCSV.splice(0, noOfCol);
					for (var i = 0; i < excelData.length; i++) {
						record[headerRow[i]] = excelData[i].trim();
					}
					data.push(record);
				}

				that.getView().getModel("objectView").setProperty("/data", data);
			};
			debugger;
			//File Reader will start reading the file
			reader.readAsBinaryString(file);

		}
	});
});

[maheshpalavalli · Accepted solution]

In onInit use this.getView().setModel(...)

[shreyashrangrej · Accepted solution]

Thank you!