I am uploading an excel sheet (xlsx and CSV) using sheetjs library. I want to read excel sheet and show the data in the datatable. When I am uploading large number of records the chrome is giving page unresponsiveness message which i want to avoid. Is there any way to avoid that?
Js code:
//Used the uploaded excel sheet and show table
onTableImport: function (component, event, helper) {
component.set('v.showSpinner',true);
helper.readExcelFile(component, event)
.then($A.getCallback(function(response){
helper.showToastFunc("Message !","File has been uploaded successfully !","sticky","success");
}))
.catch($A.getCallback(function(errorResponse) {
helper.showToastFunc("Message !","Some error came!","sticky","error");
})).finally($A.getCallback(function(){
component.set('v.showSpinner',false);
}));
},
Helper code:
readExcelFile : function(component, event){
return new Promise(function (resolve, reject) {
let files = event.getSource().get("v.files");
let file = files[0];
let reader = new FileReader();
reader.onload = function(event) {
let filename = file.name;
let data = event.target.result;
let XL_row_object = {};
let workbook = XLSX.read(data, {
type: 'binary'
});
workbook.SheetNames.some(function(sheetName) {
XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName],{defval:""});
return true;
});
let isCollectedColumns = false;
let columnsArray = [];
let valueAllArray = [];
let oneRowValueArray = [];
for(let i in XL_row_object){
oneRowValueArray = [];
let oneRow = XL_row_object[i];
for(let key in oneRow){
if(isCollectedColumns == false){
columnsArray.push(key);
}
oneRowValueArray.push(oneRow[key]);
}
isCollectedColumns = true;
valueAllArray.push(oneRowValueArray);
}
component.set('v.data',valueAllArray);
component.set('v.columns',columnsArray);
component.set('v.fileUploadedForTable',true);
component.set('v.filename',filename);
component.set('v.base64Str',btoa(data));
resolve();
}
reader.onerror = function(event) {
console.log("File could not be read! Code " + event.target.error.code);
reject(new Error("File could not be read! Code " + event.target.error.code));
};
reader.readAsBinaryString(file);
});
}