1

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);
        
    });
}
3
  • Out of curiosity -- how big is the file? In terms of rows/cells?
    – kurunve
    Commented Aug 8, 2023 at 18:17
  • I know input file tag can accept maximum 3.5 Mb file..But what i am trying to do here is 12000 rows with 5 colums giving 350KB total size of a file
    – Sukruti
    Commented Aug 8, 2023 at 18:40
  • 1
    Just found out, that js is not the issue here. The html where iteration is happening taking a lot of time. When the table gets loaded and you try to close the service console tab, it will again show page unresponsiveness
    – Sukruti
    Commented Aug 9, 2023 at 10:48

0

You must log in to answer this question.

Browse other questions tagged .